.elementor-18 .elementor-element.elementor-element-3ab6cef3 > .elementor-container{min-height:100dvh;}.elementor-18 .elementor-element.elementor-element-3ab6cef3{padding:150px 0px 0px 0px;}.elementor-bc-flex-widget .elementor-18 .elementor-element.elementor-element-458ab177.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-18 .elementor-element.elementor-element-458ab177.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-18 .elementor-element.elementor-element-458ab177.elementor-column > .elementor-widget-wrap{justify-content:flex-start;}.elementor-18 .elementor-element.elementor-element-458ab177 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-64a8b8c{text-align:center;}.elementor-18 .elementor-element.elementor-element-64a8b8c .elementor-heading-title{font-family:"Formula condensed", Sans-serif;font-size:80px;}.elementor-18 .elementor-element.elementor-element-13712eaa > .elementor-widget-container{padding:0px 0px 100px 0px;}/* Start custom CSS for wc-elements, class: .elementor-element-13712eaa *//* ============================================================
   MI CUENTA — TABS VERTICALES · ESTILO ALTAGRACIA
   Pega este CSS en: Apariencia → Personalizar → CSS adicional
   (o en el CSS personalizado de Elementor)
   ============================================================ */

/* --- Paleta (ajusta con el cuentagotas si hace falta) --- */
:root {
    --ag-bg:          #F8F5EF;   /* fondo crema (todo)               */
    --ag-accent:      #8A7449;   /* dorado/bronce del botón "Acceso" */
    --ag-accent-dark: #6F5D3A;   /* variante más oscura para hover   */
    --ag-text:        #2B2B2B;   /* texto principal                  */
    --ag-muted:       #7a7369;   /* texto secundario                 */
    --ag-border:      #E3DDD0;   /* borde suave                      */
}

/* --- Layout: navegación a la izquierda, contenido a la derecha --- */
.woocommerce-account .woocommerce {
    display: flex;
    gap: 0;                      /* tarjeta pegada a las tabs */
    align-items: stretch;
    max-width: 1100px;
    margin: 0 auto;
}

/* ============================================================
   NAVEGACIÓN (columna de tabs)
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 260px;
    width: 260px;
    float: none;                 /* anula el float por defecto de Woo */
    margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;            /* quita los puntos */
    margin: 0;
    padding: 0;
    background: var(--ag-bg);
    border: 1px solid var(--ag-border);
    height: 100%;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
    margin: 0;
    border-bottom: 1px solid var(--ag-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
    border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 15px 22px;
    color: var(--ag-text);
    text-decoration: none;
    font-family: "Formula Condensed", sans-serif;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 18px;
    line-height: 1.2;
    /* barra de acento a la izquierda (invisible por defecto) */
    border-left: 3px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

/* Hover */
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    color: var(--ag-accent-dark);
    border-left-color: var(--ag-accent);
}

/* Tab activa */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--ag-accent);
    color: #fff;
    font-weight: 400;
    border-left-color: var(--ag-accent-dark);
}

/* ============================================================
   CONTENIDO (panel de la derecha, pegado a las tabs)
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1;
    width: auto;
    float: none;
    margin: 0;
    background: var(--ag-bg);
    border: 1px solid var(--ag-border);
    border-left: none;           /* comparte el borde con las tabs */
    padding: 32px;
    color: var(--ag-text);
}

/* Títulos de Mi cuenta con la tipografía de la web */
.woocommerce-account .woocommerce-MyAccount-content h1,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content h4,
.woocommerce-account .woocommerce-MyAccount-content legend {
    font-family: "Formula Condensed", sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 0;
}

/* Enlaces dentro del contenido con el color de acento */
.woocommerce-account .woocommerce-MyAccount-content a {
    color: var(--ag-accent);
}
.woocommerce-account .woocommerce-MyAccount-content a:hover {
    color: var(--ag-accent-dark);
}

/* Botones dentro de Mi cuenta a juego con la web */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button {
    background: var(--ag-accent);
    color: #fff;
    border: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background .2s ease;
}
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button:hover {
    background: var(--ag-accent-dark);
}

/* Tablas (pedidos, direcciones) con bordes suaves */
.woocommerce-account .woocommerce-MyAccount-content table {
    border-color: var(--ag-border);
}

/* ============================================================
   OCULTAR LA PESTAÑA "DESCARGAS"
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads {
    display: none;
}

/* ============================================================
   AVISOS / MENSAJES (info, éxito, error) a juego con la web
   Quita el borde azul y el fondo gris por defecto de Woo
   ============================================================ */
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-notice {
    background: var(--ag-bg);
    border-top: 3px solid var(--ag-accent);
    color: var(--ag-text);
}

/* El iconito redondo de los avisos también en dorado */
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-error::before {
    color: var(--ag-accent);
}

/* ============================================================
   FORMULARIO "DETALLES DE LA CUENTA" — evitar desbordamiento
   Se apilan las filas a ancho completo y los campos se
   ajustan al contenedor (sin salirse de la pantalla)
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-content form {
    max-width: 100%;
}

/* Todas las filas a ancho completo, sin flotados a dos columnas */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row,
.woocommerce-account .woocommerce-MyAccount-content .form-row {
    width: 100% !important;
    float: none !important;
    clear: both;
    margin: 0 0 18px !important;
    padding: 0 !important;
}

/* Campos ajustados al ancho de la tarjeta */
.woocommerce-account .woocommerce-MyAccount-content input,
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* El fieldset de "Cambio de contraseña" también contenido */
.woocommerce-account .woocommerce-MyAccount-content fieldset {
    max-width: 100%;
    box-sizing: border-box;
    border-color: var(--ag-border);
    margin-top: 20px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- TABLET (hasta 1024px): estrechamos la columna de tabs --- */
@media (max-width: 1024px) {
    .woocommerce-account .woocommerce {
        gap: 0;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        flex: 0 0 200px;
        width: 200px;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation li a {
        padding: 13px 16px;
        font-size: 17px;
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 24px;
    }
}

/* --- MÓVIL / TABLET VERTICAL (hasta 768px) ---
   Las tabs pasan arriba en una fila horizontal desplazable
   y el contenido debajo, todo a ancho completo             */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce {
        flex-direction: column;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        flex: 1 1 auto;
        width: 100%;
    }

    /* Tabs en fila horizontal con scroll lateral si no caben */
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation li {
        border-bottom: none;
        border-right: 1px solid var(--ag-border);
        white-space: nowrap;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
        border-right: none;
    }
    /* La barrita de acento pasa abajo en vez de a la izquierda */
    .woocommerce-account .woocommerce-MyAccount-navigation li a {
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 14px 18px;
        font-size: 17px;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
        border-left-color: transparent;
        border-bottom-color: var(--ag-accent);
    }
    .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
        border-left-color: transparent;
        border-bottom-color: var(--ag-accent-dark);
    }

    /* El contenido se une por arriba con la fila de tabs */
    .woocommerce-account .woocommerce-MyAccount-content {
        border-left: 1px solid var(--ag-border);
        border-top: none;
        padding: 22px;
    }
}

/* --- MÓVIL PEQUEÑO (hasta 480px): más aire y campos cómodos --- */
@media (max-width: 480px) {
    .woocommerce-account .woocommerce-MyAccount-navigation li a {
        padding: 12px 14px;
        font-size: 16px;
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 18px;
    }
    /* Evita el zoom automático de iOS al enfocar un campo */
    .woocommerce-account .woocommerce-MyAccount-content input,
    .woocommerce-account .woocommerce-MyAccount-content select,
    .woocommerce-account .woocommerce-MyAccount-content textarea {
        font-size: 16px;
    }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Formula condensed';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://videnciatarotluz.com/wordpress/wp-content/uploads/2026/06/PP-Formula-Condensed-Regular-400-1.woff') format('woff'),
		url('https://videnciatarotluz.com/wordpress/wp-content/uploads/2026/06/PP-Formula-Condensed-Regular-400-1.ttf') format('truetype'),
		url('https://videnciatarotluz.com/wordpress/wp-content/uploads/2026/06/PP-Formula-Condensed-Regular-400-1.svg#Formulacondensed') format('svg');
}
@font-face {
	font-family: 'Formula condensed';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://videnciatarotluz.com/wordpress/wp-content/uploads/2026/06/FORMULACONDENSED-BOLD-2.woff') format('woff'),
		url('https://videnciatarotluz.com/wordpress/wp-content/uploads/2026/06/FORMULACONDENSED-BOLD-1.ttf') format('truetype'),
		url('https://videnciatarotluz.com/wordpress/wp-content/uploads/2026/06/FORMULACONDENSED-BOLD-1.svg#Formulacondensed') format('svg');
}
@font-face {
	font-family: 'Formula condensed';
	font-style: normal;
	font-weight: 200;
	font-display: auto;
	src: url('https://videnciatarotluz.com/wordpress/wp-content/uploads/2026/06/FORMULACONDENSED-LIGHT-2.woff') format('woff'),
		url('https://videnciatarotluz.com/wordpress/wp-content/uploads/2026/06/FORMULACONDENSED-LIGHT-1.ttf') format('truetype'),
		url('https://videnciatarotluz.com/wordpress/wp-content/uploads/2026/06/FORMULACONDENSED-LIGHT-1.svg#Formulacondensed') format('svg');
}
/* End Custom Fonts CSS */