@charset "UTF-8";

/* ==========================================================================
   CUENTAS — acceso, recuperación y perfil

   Hoja del rediseño de las cuatro pantallas de cuenta, sobre el sistema del
   REDISEÑO 2026 -rediseno.css-: Karla para el texto, Newsreader para los
   titulares, paneles blancos con filete sobre el crema y rótulo en mayúscula
   encima de cada bloque.

   POR QUE ESTE SISTEMA Y NO EL DEL CARRITO. El carrito y la ficha van en Jost,
   que fue lo primero que se rehizo. Pero la portada y los catálogos ya están en
   Karla + Newsreader, que es a donde va el sitio entero: rediseno.css se llama
   así por eso y carga la última de todas. Poner estas pantallas en Jost las
   habría dejado encajando con el carrito y desencajando con la portada, y
   habría que rehacerlas otra vez al rediseñar el resto.

   POR QUE UNA HOJA APARTE. index.css pesa 19 KB minificados en una sola
   linea, con reglas de 2019 que nadie sabe quien usa. Tocarla para esto
   significaba arriesgar el resto del sitio. Esta hoja carga despues y solo
   toca lo que lleva el prefijo .cta-, mas cuatro anulaciones acotadas de las
   reglas viejas que hay que apagar por su nombre.

   TODOS LOS TAMANOS EN PIXELES A PROPOSITO: index.css trae un
   `* { font-size: 16px }` que gana a cualquier tamano heredado en em o rem.
   ========================================================================== */

.cta {
    /*
     * Se heredan los tokens de rediseno.css en vez de repetir sus hexadecimales:
     * si manana cambia la paleta del sitio, estas pantallas cambian con ella.
     * El respaldo tras la coma es por si esta hoja se carga suelta.
     */
    --cta-marron: var(--rd-brown, #8B5E34);
    --cta-marron-hover: #6F4926;
    --cta-acento: var(--rd-accent, #B4462F);
    --cta-crema: var(--rd-bg-soft, #FBF6F1);
    --cta-fondo: var(--rd-bg, #F3EAE1);
    --cta-filete: var(--rd-line-2, #E4D8CE);
    --cta-filete-suave: var(--rd-line, #EFE3D9);
    --cta-blanco: var(--rd-white, #FFFFFF);
    --cta-texto: var(--rd-ink, #3E2A20);
    --cta-texto-2: var(--rd-ink-2, #6B5346);
    --cta-texto-3: var(--rd-ink-3, #8A7466);
    --cta-error: var(--rd-accent-dark, #8E3522);
    --cta-error-fondo: #FBEFEA;
    --cta-error-filete: var(--rd-accent-line, #EFC9BB);
    --cta-ok: #3F7A48;
    --cta-ok-fondo: #EEF4EF;
    --cta-ok-filete: #CFE0D3;
    --cta-estampa: var(--rd-line-3, #D8BCAE);

    --cta-sans: var(--rd-sans, 'Karla', system-ui, sans-serif);
    --cta-serif: var(--rd-serif, 'Newsreader', Georgia, serif);

    font-family: var(--cta-sans);
    color: var(--cta-texto);
    background: var(--cta-fondo);
}

/* ---------- La sección: contiene las estampas ----------

   El fallo viejo: las estampas eran `position:absolute` sin ancestro
   posicionado, asi que se anclaban al BODY. Con `bottom:25%` dos de ellas
   caian por debajo del pie, en un vacio de 650px. `position:relative` aqui
   las encierra, y `overflow:hidden` recorta lo que sobresalga. */
.cta-seccion {
    position: relative;
    overflow: hidden;
    /*
     * Crece hasta llenar lo que queda de ventana bajo la cabecera y sobre el
     * pie. Sin esto, en una pantalla alta la pagina acababa antes que la
     * ventana y quedaba una banda de crema vacia debajo del pie, que parece un
     * fallo de maquetado aunque no lo sea. El max() mantiene el minimo para
     * pantallas bajas.
     */
    min-height: max(560px, calc(100vh - 420px));
    padding: 56px 20px 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cta-fondo);
}

/* ---------- Estampas ----------

   Antes eran cuatro JPG. El JPG no admite transparencia, asi que sobre el
   crema cada una salia dentro de su recuadro blanco. Ahora son SVG de trazo
   en el marcado: no tienen fondo que tapar y heredan el color. */
.cta-estampa {
    position: absolute;
    color: var(--cta-estampa);
    pointer-events: none;
    z-index: 0;
}
.cta-estampa--1 { left: 7%;  top: 12%;   width: 168px; height: 168px; opacity: .35; }
.cta-estampa--2 { right: 8%; top: 16%;   width: 150px; height: 150px; opacity: .32; }
.cta-estampa--3 { left: 12%; bottom: 8%; width: 132px; height: 132px; opacity: .28; }
.cta-estampa--4 { right: 11%; bottom: 10%; width: 140px; height: 140px; opacity: .26; }

/* ---------- Panel ---------- */
.cta-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    box-sizing: border-box;
    background: var(--cta-blanco);
    border: 1px solid var(--cta-filete);
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.cta-rotulo {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cta-texto-3);
    margin: 0;
}

.cta-titulo {
    margin: 0;
    /* Los titulares con caracter van en la serif del rediseno, como en la
       portada. El peso 400 y el interletrado son los que usa rediseno.css. */
    font-family: var(--cta-serif);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--cta-texto);
}

.cta-bajada {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--cta-texto-2);
}

/* ---------- Campos ---------- */
.cta-campo { display: flex; flex-direction: column; gap: 7px; }

.cta-campo label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cta-texto-3);
    margin: 0;
}

.cta-campo input {
    height: 48px;
    box-sizing: border-box;
    padding: 0 14px;
    font-family: var(--cta-sans);
    font-size: 16px;
    color: var(--cta-texto);
    background: var(--cta-blanco);
    border: 1px solid var(--cta-filete);
    border-radius: 8px;
    width: 100%;
}
.cta-campo input:focus {
    outline: none;
    border-color: var(--cta-marron);
    box-shadow: 0 0 0 3px rgba(139, 94, 52, .14);
}
.cta-campo input::placeholder { color: var(--cta-texto-3); }
.cta-campo--mal input { border-color: var(--cta-error-filete); }

/* ---------- Botones ---------- */
.cta-boton {
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 28px;
    font-family: var(--cta-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cta-blanco);
    background: var(--cta-marron);
    border: 1px solid var(--cta-marron);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease;
}
.cta-boton:hover { background: var(--cta-marron-hover); border-color: var(--cta-marron-hover); color: var(--cta-blanco); }
.cta-boton[disabled] { background: #b39472; border-color: #b39472; cursor: default; }

.cta-boton--claro {
    color: var(--cta-marron);
    background: var(--cta-blanco);
    border-color: var(--cta-filete);
}
.cta-boton--claro:hover { background: var(--cta-crema); color: var(--cta-marron-hover); }

.cta-boton--ancho { width: 100%; }

/* ---------- Avisos: el hueco que antes no existia ---------- */
.cta-aviso {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
}
.cta-aviso svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.cta-aviso--mal { background: var(--cta-error-fondo); border: 1px solid var(--cta-error-filete); color: var(--cta-error); }
.cta-aviso--bien { background: var(--cta-ok-fondo); border: 1px solid var(--cta-ok-filete); color: var(--cta-ok); }

/* ---------- Pie del panel ---------- */
.cta-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--cta-filete-suave);
    font-size: 14px;
    color: var(--cta-texto-3);
}
.cta-pie a { color: var(--cta-marron); }
.cta-pie a:hover { color: var(--cta-marron-hover); }
.cta-pie strong, .cta-pie .cta-fuerte { font-weight: 600; }

/* ---------- Estado "ya iniciaste sesión" ---------- */
.cta-medallon {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 50%;
    background: var(--cta-crema);
    border: 1px solid var(--cta-filete);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cta-marron);
}
.cta-medallon svg { width: 26px; height: 26px; }
.cta-acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-acciones .cta-boton { flex: 1 1 180px; }

/* ==========================================================================
   PERFIL
   ========================================================================== */
.cta-perfil {
    max-width: 1240px;
    margin: 0 auto;
    /*
     * El padding de arriba deja pasar la CABECERA FIJA. Medido en QA:
     * .cabeceramenu es `position:fixed` con z-index 100 y 180px de alto, asi
     * que el contenido que empieza en 0 le queda debajo. Sin esto, el titulo
     * "Mi perfil" y las tres pestanas salian tapados por el menu.
     *
     * Las pantallas de acceso no lo notaban porque su panel va centrado dentro
     * de una seccion alta; el perfil empieza arriba del todo y si lo sufre.
     */
    padding: 208px 20px 64px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cta-perfil-cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.cta-perfil-cabecera .cta-titulo { font-size: 32px; }
.cta-perfil-dato { font-size: 14px; color: var(--cta-texto-2); }

/* Pestañas */
.cta-pestanas {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--cta-filete);
    overflow-x: auto;
}
.cta-pestana {
    flex: none;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cta-texto-3);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.cta-pestana:hover { color: var(--cta-marron); }
.cta-pestana.es-activa { color: var(--cta-marron); border-bottom-color: var(--cta-marron); }

.cta-rejilla {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}
.cta-caja {
    background: var(--cta-blanco);
    border: 1px solid var(--cta-filete);
    border-radius: 14px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-sizing: border-box;
}
.cta-caja--ancha { grid-column: span 2; }
.cta-caja--crema { background: var(--cta-crema); }
.cta-caja-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

/* Lista de pedidos */
.cta-pedido {
    background: var(--cta-blanco);
    border: 1px solid var(--cta-filete);
    border-radius: 14px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.cta-pedido-foto {
    width: 74px;
    height: 74px;
    flex: none;
    border-radius: 10px;
    background: var(--cta-crema);
    border: 1px solid var(--cta-filete-suave);
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cta-estampa);
}
.cta-pedido-cuerpo { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cta-pedido-nombre { font-size: 17px; font-weight: 500; color: var(--cta-texto); }
.cta-pedido-meta { font-size: 14px; color: var(--cta-texto-2); }
.cta-pedido-total { flex: none; font-size: 18px; font-weight: 600; color: var(--cta-texto); text-align: right; }

.cta-marca {
    flex: none;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--cta-crema);
    border: 1px solid var(--cta-filete);
    color: var(--cta-marron);
    white-space: nowrap;
}
.cta-marca--ok { background: var(--cta-ok-fondo); border-color: var(--cta-ok-filete); color: var(--cta-ok); }

/* Sin pedidos */
.cta-vacio {
    position: relative;
    overflow: hidden;
    background: var(--cta-blanco);
    border: 1px solid var(--cta-filete);
    border-radius: 14px;
    padding: 56px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}
/*
 * El contenido se levanta sobre las estampas. Se excluyen ELLAS del selector:
 * una version de esta regla decia `.cta-vacio > *` a secas y, como las
 * estampas son hijas directas, les cambiaba el position:absolute por relative.
 * Volvian al flujo, se apilaban una debajo de otra y la caja pasaba de 360px a
 * 1019px, con las figuras sueltas por el medio. Medido en QA.
 */
.cta-vacio > *:not(.cta-estampa) { position: relative; z-index: 1; }
.cta-vacio .cta-estampa { position: absolute; z-index: 0; }
.cta-vacio-medallon {
    width: 78px; height: 78px; border-radius: 50%;
    background: var(--cta-crema); border: 1px solid var(--cta-filete);
    display: flex; align-items: center; justify-content: center; color: var(--cta-marron);
}
.cta-vacio-medallon svg { width: 34px; height: 34px; }

/* Paginación */
.cta-paginacion { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 6px; }
.cta-paginacion .pagination { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.cta-paginacion .pagination li a,
.cta-paginacion .pagination li > span {
    min-width: 40px; height: 40px; padding: 0 12px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--cta-texto-2);
    background: var(--cta-blanco); border: 1px solid var(--cta-filete);
    border-radius: 8px; text-decoration: none;
}
.cta-paginacion .pagination li.active > a,
.cta-paginacion .pagination li.active > span {
    color: var(--cta-blanco); background: var(--cta-marron); border-color: var(--cta-marron); font-weight: 600;
}

/* ==========================================================================
   MÓVIL. Se compra mucho desde el celular, asi que manda esta parte.
   ========================================================================== */
@media (max-width: 991.98px) {
    .cta-rejilla { grid-template-columns: minmax(0, 1fr); }
    .cta-caja--ancha { grid-column: auto; }
}

@media (max-width: 767.98px) {
    .cta-seccion { padding: 28px 16px 44px; min-height: 0; }
    .cta-panel { padding: 24px 20px; gap: 18px; border-radius: 14px; }
    .cta-titulo { font-size: 26px; }
    .cta-perfil-cabecera .cta-titulo { font-size: 27px; }
    /*
     * En movil la cabecera fija mide 150px, medido en un viewport de 390.
     * Con 130 el rotulo "Tu cuenta" quedaba justo debajo del menu y no se
     * leia. 174 deja 24px de aire.
     */
    .cta-perfil { padding: 174px 16px 48px; gap: 18px; }
    .cta-caja { padding: 20px; }
    .cta-caja-campos { grid-template-columns: minmax(0, 1fr); }

    /* Los campos van a 50px y 16px: por debajo de 16px el iPhone hace zoom
       solo al enfocar, y la pantalla salta. */
    .cta-campo input { height: 50px; font-size: 16px; }
    .cta-boton { height: 52px; width: 100%; }
    .cta-pie { flex-direction: column; align-items: flex-start; gap: 10px; }

    /* Las estampas se van a los bordes para no meterse debajo del panel. */
    .cta-estampa--1 { left: auto; right: -34px; top: 4px; width: 140px; height: 140px; }
    .cta-estampa--2 { display: none; }
    .cta-estampa--3 { left: -38px; bottom: 12px; width: 132px; height: 132px; }
    .cta-estampa--4 { display: none; }

    .cta-pedido { flex-wrap: wrap; padding: 16px; gap: 14px; }
    .cta-pedido-total { width: 100%; text-align: left; }
    .cta-pedido .cta-boton { width: 100%; }
}

/* ==========================================================================
   ANULACIONES ACOTADAS DE LAS HOJAS VIEJAS

   Cuatro reglas de index.css que pintan estas pantallas y que hay que apagar
   por su nombre. Van dentro de .cta para que no alcancen a ninguna otra
   pagina: esa es la leccion del cambio global que piso el carrito.
   ========================================================================== */
.cta .img-oc-one,
.cta .img-oc-two,
.cta .img-oc-three,
.cta .img-oc-four { display: none !important; }

.cta h1, .cta h2, .cta h3, .cta p, .cta span, .cta a, .cta label, .cta button, .cta input {
    font-family: var(--cta-sans);
}

/*
 * .form-control de bootstrap y de bmd traen su propio alto, borde de una sola
 * linea y fondo con degradado de foco. Se apagan, PERO SIN TOCAR EL ALTO: una
 * version de esta regla puso `height:auto` y, al ir despues en la hoja, se
 * comio los 48px de .cta-campo input y los campos salieron aplastados.
 */
.cta .cta-campo .form-control {
    box-shadow: none;
    background-image: none;
    border: 1px solid var(--cta-filete);
    border-radius: 8px;
    padding: 0 14px;
}

/* La validacion de bootstrap pinta el borde; se respeta la paleta. */
.cta .cta-campo .form-control.is-invalid { border-color: var(--cta-error-filete); background-image: none; }
.cta .cta-campo .form-control.is-valid { border-color: var(--cta-ok-filete); background-image: none; }

/*
 * El alto, al final de la hoja y con el peso suficiente para ganar a bmd, que
 * declara los suyos sobre .form-control. Los 16px del texto no son estetica:
 * por debajo de 16px el iPhone hace zoom solo al enfocar el campo y la
 * pantalla da un salto.
 */
.cta .cta-campo input.form-control,
.cta .cta-campo input {
    height: 48px;
    font-size: 16px;
    line-height: normal;
}

@media (max-width: 767.98px) {
    .cta .cta-campo input.form-control,
    .cta .cta-campo input { height: 50px; }
}

/*
 * LAS ETIQUETAS FLOTANTES DE BOOTSTRAP MATERIAL.
 *
 * bmd.js convierte toda <label> en etiqueta flotante: la pone en
 * `position:absolute` y la sube sobre el campo. Medido aqui: position
 * absolute, top 7px. Con eso, los rotulos de estas pantallas se despegaban de
 * su campo y se amontonaban arriba del panel -se veia un "CONTRASEÑA" suelto
 * encima del titulo-.
 *
 * Se devuelven al flujo. Va con !important porque la regla de bmd tambien lo
 * lleva, y acotado a .cta para no tocar ningun otro formulario del sitio.
 */
.cta .cta-campo label {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    pointer-events: auto;
    font-size: 11px !important;
    line-height: 1.3;
    opacity: 1 !important;
    color: var(--cta-texto-3) !important;
}

/*
 * Y el contenedor deja de reservar el hueco que la etiqueta flotante ocupaba.
 */
.cta .form-group,
.cta .bmd-form-group {
    padding: 0;
    margin: 0;
}