/* =========================================================================
   Cotizador — capa visual de Mirey Atelier

   Construida sobre los tokens que ya declara index.html: --noir, --brass,
   --bone, --paper, --graphite, y las tipografías Cinzel y Spectral. No
   inventa colores propios: si mañana cambia la paleta del sitio, el
   cotizador cambia con ella.

   El motor es el mismo que el de Kendra. Lo que cambia es todo lo que se
   ve: allí es marfil, luz y verificación técnica; aquí es noir, latón y
   aire. Dos lecturas del mismo dato, no un mismo diseño con otro logo.
   ========================================================================= */

.cotz {
    --c-fondo:    var(--noir, #050505);
    --c-capa:     var(--slate, #0E0E0E);
    --c-linea:    rgba(234, 228, 216, .12);
    --c-linea-viva: rgba(194, 162, 104, .45);

    --c-texto:    var(--bone, #EAE4D8);
    --c-suave:    var(--graphite, #8B837A);
    --c-laton:    var(--brass, #C2A268);
    --c-laton-claro: var(--brass-pale, #E4CFA0);

    --c-display:  var(--f-display, "Cinzel", Didot, Georgia, serif);
    --c-texto-f:  var(--f-text, "Spectral", Georgia, serif);

    background: var(--c-fondo);
    color: var(--c-texto);
}

.cotz--completo { padding-block: clamp(72px, 9vw, 132px); }
.cotz--compacto { padding-block: clamp(56px, 7vw, 96px); }
.cotz--portada  { padding-block: clamp(72px, 9vw, 132px); background: transparent; }

/* --------------------------------------------------------------------------
   Encabezado
   -------------------------------------------------------------------------- */
.cotz__cabecera {
    max-width: 38ch;
    margin-bottom: clamp(40px, 5vw, 72px);
}

.cotz__titulo {
    font-family: var(--c-display);
    font-weight: 400;
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.1rem);
    line-height: 1.12;
    letter-spacing: .01em;
    color: var(--c-texto);
    margin: 0 0 20px;
}

.cotz--compacto .cotz__titulo {
    font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.1rem);
}

.cotz__lead {
    font-family: var(--c-texto-f);
    font-size: 1.04rem;
    line-height: 1.8;
    color: var(--c-suave);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Campo de gramos
   -------------------------------------------------------------------------- */
.cotz__control {
    margin-bottom: clamp(40px, 5vw, 60px);
    max-width: 440px;
}

.cotz__etiqueta {
    display: block;
    font-family: var(--c-display);
    font-size: .68rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--c-laton);
    margin-bottom: 14px;
}

.cotz__campo {
    display: flex;
    align-items: stretch;
    background: var(--c-capa);
    border: 1px solid var(--c-linea);
    /* Filete de latón abajo: señala dónde se escribe sin encerrar el campo. */
    box-shadow: inset 0 -1px 0 0 var(--c-linea-viva);
}

.cotz__campo:focus-within {
    border-color: var(--c-linea-viva);
    box-shadow: inset 0 -2px 0 0 var(--c-laton);
}

.cotz__input {
    flex: 1;
    min-width: 0;
    min-height: 72px;
    padding: 0 22px;
    border: 0;
    background: transparent;
    color: var(--c-texto);
    font-family: var(--c-texto-f);
    /* 1.75rem evita el zoom automático de iOS al tocar el campo. */
    font-size: 1.75rem;
    font-variant-numeric: tabular-nums;
}

.cotz__input:focus { outline: none; }
.cotz__input::placeholder { color: rgba(139, 131, 122, .55); }

.cotz__unidad {
    display: flex;
    align-items: center;
    padding-right: 22px;
    font-family: var(--c-texto-f);
    font-size: 1rem;
    color: var(--c-suave);
}

.cotz__ayuda {
    margin: 14px 0 0;
    font-family: var(--c-texto-f);
    font-size: .88rem;
    color: var(--c-suave);
}

.cotz__error {
    margin: 14px 0 0;
    padding-left: 14px;
    /* El error no se comunica solo por color: lleva filete y texto propio. */
    border-left: 2px solid var(--oxblood-lit, #6E2028);
    font-family: var(--c-texto-f);
    font-size: .9rem;
    color: #D08E86;
}

/* --------------------------------------------------------------------------
   Resultados
   Tarjetas separadas por un filete de un píxel, no recuadros: encaja con la
   retícula del sitio. En móvil se apilan.
   -------------------------------------------------------------------------- */
.cotz__resultados {
    display: grid;
    gap: 1px;
    grid-template-columns: 1fr;
    background: var(--c-linea);
    border: 1px solid var(--c-linea);
}

.cotz__carta { position: relative; }

/* El control real queda accesible al teclado pero no se dibuja:
   la tarjeta entera es el botón. */
.cotz__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cotz__carta-cuerpo {
    display: grid;
    gap: 3px;
    padding: clamp(24px, 2.8vw, 34px);
    min-height: 56px;
    height: 100%;
    background: var(--c-capa);
    cursor: pointer;
    transition: background-color 300ms ease;
}

.cotz__carta-cuerpo:hover { background: #141414; }

.cotz__radio:checked + .cotz__carta-cuerpo {
    background: #141414;
    box-shadow: inset 2px 0 0 0 var(--c-laton);
}

.cotz__radio:focus-visible + .cotz__carta-cuerpo {
    outline: 1px solid var(--c-laton);
    outline-offset: -1px;
}

.cotz__quilate {
    font-family: var(--c-display);
    font-weight: 400;
    font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.2rem);
    line-height: 1.05;
    letter-spacing: .02em;
    color: var(--c-texto);
}

.cotz__radio:checked + .cotz__carta-cuerpo .cotz__quilate { color: var(--c-laton-claro); }

.cotz__pureza {
    font-family: var(--c-display);
    font-size: .6rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--c-suave);
    margin-bottom: clamp(18px, 2.2vw, 26px);
}

.cotz__gramo {
    display: block;
    font-family: var(--c-texto-f);
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
    color: var(--c-suave);
    padding-bottom: clamp(14px, 1.8vw, 20px);
    border-bottom: 1px solid var(--c-linea);
    margin-bottom: clamp(14px, 1.8vw, 20px);
}

.cotz__gramo-unidad { color: rgba(139, 131, 122, .8); }

.cotz__total { display: block; }

.cotz__total-rotulo {
    display: block;
    font-family: var(--c-display);
    font-size: .6rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--c-suave);
    margin-bottom: 7px;
}

.cotz__total-cifra {
    display: block;
    font-family: var(--c-texto-f);
    font-size: clamp(1.4rem, 1.1rem + 1.3vw, 1.9rem);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: var(--c-texto);
}

.cotz__radio:checked + .cotz__carta-cuerpo .cotz__total-cifra { color: var(--c-laton-claro); }

/* --------------------------------------------------------------------------
   Moneda, fecha, acción y aviso
   -------------------------------------------------------------------------- */
.cotz__moneda {
    margin: clamp(30px, 3.6vw, 42px) 0 0;
    font-family: var(--c-display);
    font-size: .64rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--c-laton);
}

.cotz__moneda + .cotz__fecha { margin-top: 10px; }

.cotz__fecha {
    margin: clamp(30px, 3.6vw, 42px) 0 0;
    font-family: var(--c-texto-f);
    font-size: .85rem;
    color: var(--c-suave);
}

.cotz__fecha-rotulo {
    font-family: var(--c-display);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .3em;
    color: var(--c-laton);
}

.cotz__cta { margin: clamp(34px, 4.2vw, 50px) 0 0; }

.cotz__accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 20px clamp(32px, 4vw, 54px);
    border: 1px solid var(--c-laton);
    background: transparent;
    color: var(--c-laton-claro);
    font-family: var(--c-display);
    font-size: .76rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 340ms ease, color 340ms ease;
}

.cotz__accion:hover,
.cotz__accion:focus-visible {
    background: var(--c-laton);
    color: var(--c-fondo);
}

.cotz__mas {
    margin: 22px 0 0;
    font-family: var(--c-texto-f);
    font-size: .9rem;
}

.cotz__mas a { color: var(--c-laton-claro); }

.cotz__aviso {
    max-width: 64ch;
    margin: clamp(34px, 4.2vw, 50px) 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--c-linea);
    font-family: var(--c-texto-f);
    font-size: .88rem;
    line-height: 1.85;
    color: var(--c-suave);
}

/* --------------------------------------------------------------------------
   Estado en reposo: pausado, precios sin actualizar o sin datos
   -------------------------------------------------------------------------- */
.cotz__reposo {
    background: var(--c-capa);
    border: 1px solid var(--c-linea);
    box-shadow: inset 2px 0 0 0 var(--c-laton);
    padding: clamp(32px, 4vw, 52px);
    max-width: 64ch;
}

.cotz__reposo-texto {
    font-family: var(--c-display);
    font-weight: 400;
    font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem);
    line-height: 1.45;
    color: var(--c-texto);
    margin: 0 0 22px;
}

.cotz__reintentar {
    min-height: 52px;
    padding: 14px 28px;
    background: transparent;
    border: 1px solid var(--c-linea);
    color: var(--c-suave);
    font-family: var(--c-display);
    font-size: .72rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    cursor: pointer;
}

.cotz__reintentar:hover { border-color: var(--c-laton); color: var(--c-laton-claro); }

/* --------------------------------------------------------------------------
   Pantallas grandes
   -------------------------------------------------------------------------- */
@media (min-width: 720px) {
    .cotz__resultados { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
    .cotz__resultados { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .cotz__carta-cuerpo,
    .cotz__accion { transition: none; }
}