/*
 * Formulario de solicitud de presupuesto · Bodegas Campos
 *
 * Mobile-first: las media queries van hacia arriba (min-width), nunca hacia
 * abajo. Sin framework ni dependencias externas.
 */

/* ---------------------------------------------------------------- Fuentes --
 * Las de la marca: Kalnia para los titulares y Mulish para el texto, que es lo
 * que usa bodegascampos.com. Antes iba con Spectral, que no coincidia con la web.
 *
 * Autoalojadas a proposito: servirlas desde Google supondria una peticion a un
 * tercero en cada visita.
 *
 * Ambas son fuentes variables, asi que un unico fichero por subconjunto cubre
 * toda la escala de pesos. Descargar uno por peso, como se hacia con Spectral,
 * bajaba el mismo archivo repetido.
 */

@font-face {
    font-family: 'Kalnia';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('../fonts/kalnia-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Kalnia';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('../fonts/kalnia-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('../fonts/mulish-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('../fonts/mulish-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------- Variables -- */

:root {
    /* El azul solo vive ya en la barra de progreso: el resto de la interfaz
       es burdeos, el color de la casa. */
    --azul: #457f94;
    --azul-oscuro: #2f5f70;
    --burdeos: #711627;
    --burdeos-oscuro: #560f1c;
    --tinta: #2b2824;
    --tinta-suave: #5c564e;
    --crema: #f7f3ea;
    --crema-hundida: #efe8da;
    --borde: #d9cfbb;
    --rojo: #b3261e;
    --blanco: #fff;

    --radio: 4px;
    --sombra: 0 1px 3px rgba(43, 40, 36, .08), 0 8px 24px rgba(43, 40, 36, .06);

    --texto: clamp(1rem, .96rem + .2vw, 1.0625rem);
    --pregunta: clamp(1.125rem, 1rem + .6vw, 1.4375rem);
    --titulo-pie: clamp(1.125rem, 1rem + .5vw, 1.5rem);
}

/* ------------------------------------------------------------------ Reset -- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* El `display` que trae el navegador para [hidden] lo pisa cualquier regla que
   declare display, como `.navegacion { display: flex }`. Sin esto, ocultar algo
   desde JavaScript con `.hidden = true` no surte efecto. */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: var(--texto);
    line-height: 1.6;
    color: var(--tinta);
    background-color: var(--crema);
    background-image: url('https://bodegascampos.com/wp-content/uploads/2025/05/pergamino-FONDO-BODEGAS-CAMPOS.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    -webkit-text-size-adjust: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--burdeos);
}

a:hover {
    text-decoration: none;
}

/* El foco tiene que verse SIEMPRE. La version anterior sacaba todos los campos
   del orden de tabulacion con tabIndex = -1, asi que era imposible rellenar el
   formulario con teclado. */
:focus-visible {
    outline: 3px solid var(--burdeos);
    outline-offset: 2px;
    border-radius: 2px;
}

.saltar-al-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--burdeos);
    color: var(--blanco);
    padding: .75rem 1.25rem;
    z-index: 10;
}

.saltar-al-contenido:focus {
    left: 0;
}

/* Honeypot: fuera de la vista pero no con display:none, que algunos bots detectan. */
.trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------------------- Cabecera -- */

.cabecera {
    padding: .75rem 1rem .25rem;
    text-align: center;
}

.cabecera__logo {
    width: min(180px, 48vw);
}

/* El acceso al panel para el personal: pequeno y en gris. En movil va en su
   propia linea encima del logo; en pantallas anchas, en la esquina. */
.acceso-panel {
    margin: 0 0 .5rem;
    font-size: .75rem;
    line-height: 1.4;
    text-align: right;
    color: var(--tinta-suave);
}

.acceso-panel a {
    color: var(--tinta-suave);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.acceso-panel a:hover,
.acceso-panel a:focus {
    color: var(--burdeos);
}

/* --------------------------------------------------------------- Contenido -- */

.contenido {
    padding: 0 1rem 3rem;
}

/* El panel blanco sobre el pergamino. Se llama `panel` y no `tarjeta` porque
   `tarjeta` son las opciones seleccionables del formulario: compartir nombre
   hacia que las opciones heredaran el borde y la sombra del panel. */
.panel {
    max-width: 44rem;
    margin: 0 auto;
    padding: 1.25rem 1.125rem 1.75rem;
    background: rgba(255, 255, 255, .88);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

/* En movil la cabecera ocupaba mas de media pantalla y la pregunta de cada
   paso empezaba pasada la mitad: habia que hacer scroll antes de poder
   contestar nada. Los valores base de arriba son los compactos del movil;
   aqui el escritorio recupera exactamente los que tenia, que alli sobra
   sitio. */
@media (min-width: 40em) {
    .panel {
        padding: 2.5rem 3rem 3rem;
    }

    .cabecera {
        position: relative;
        padding: 1.5rem 1rem .5rem;
    }

    .acceso-panel {
        position: absolute;
        top: 1rem;
        right: 1.5rem;
        margin: 0;
    }

    .cabecera__logo {
        width: min(320px, 70vw);
    }
}

/* ---------------------------------------------------------------- Resumen -- */

/* El formulario y el resumen. En movil van uno encima de otro, con el resumen
   plegado arriba; en pantallas anchas, el resumen acompana a la derecha. */
.disposicion {
    display: flex;
    flex-direction: column;
    max-width: 44rem;
    margin: 0 auto;
}

.disposicion > .panel {
    width: 100%;
}

.resumen {
    order: -1;
    margin-bottom: .75rem;
    background: rgba(255, 255, 255, .88);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.resumen__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1.125rem;
    cursor: pointer;
    list-style: none;
}

.resumen__cabecera::-webkit-details-marker {
    display: none;
}

/* La flecha de plegar, solo en movil (en escritorio el resumen va abierto). */
.resumen__cabecera::after {
    content: '';
    flex: none;
    align-self: center;
    width: .5rem;
    height: .5rem;
    margin-left: auto;
    border-right: 1.5px solid var(--burdeos);
    border-bottom: 1.5px solid var(--burdeos);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
}

.resumen__plegable[open] .resumen__cabecera::after {
    transform: translateY(2px) rotate(-135deg);
}

.resumen__cabecera:focus-visible {
    outline: 2px solid var(--burdeos);
    outline-offset: -2px;
}

.resumen__titulo {
    margin: 0;
    font-family: 'Kalnia', Georgia, 'Times New Roman', serif;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--burdeos);
}

.resumen__cuenta {
    font-size: .8125rem;
    color: var(--tinta-suave);
    white-space: nowrap;
}

.resumen__lista {
    margin: 0;
    padding: 0 1.125rem .5rem;
}

.resumen__fila {
    padding: .7rem 0;
    border-top: 1px solid var(--crema-hundida);
}

.resumen__rotulo {
    margin: 0 0 .125rem;
    font-size: .75rem;
    color: var(--tinta-suave);
}

.resumen__valor {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tinta);
    overflow-wrap: anywhere;
}

.resumen__fila--pendiente .resumen__valor {
    font-weight: 400;
    font-style: italic;
    color: var(--tinta-suave);
}

/* La marca de lo ya contestado: un punto burdeos delante del valor. */
.resumen__fila:not(.resumen__fila--pendiente) .resumen__valor::before {
    content: '';
    display: inline-block;
    width: .375rem;
    height: .375rem;
    margin: 0 .5rem .15em 0;
    border-radius: 50%;
    background: var(--burdeos);
    vertical-align: middle;
}

/* Pantallas anchas: el resumen a la derecha, siempre abierto y acompanando
   al bajar. */
@media (min-width: 64em) {
    .disposicion {
        display: grid;
        grid-template-columns: minmax(0, 44rem) 17.5rem;
        justify-content: center;
        align-items: start;
        gap: 1.5rem;
        max-width: none;
    }

    .resumen {
        order: 0;
        position: sticky;
        top: 1.5rem;
        margin-bottom: 0;
    }

    .resumen__cabecera {
        flex-direction: column;
        gap: .25rem;
        padding: 1.5rem 1.5rem 1rem;
        cursor: default;
        pointer-events: none;
    }

    .resumen__cabecera::after {
        display: none;
    }

    .resumen__titulo {
        font-size: 1.25rem;
    }

    .resumen__lista {
        padding: 0 1.5rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .resumen__cabecera::after {
        transition: none;
    }
}

/* --------------------------------------------------------------- Portada -- */

.portada {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--borde);
}

.portada__antetitulo {
    /* En movil se esconde: es una etiqueta decorativa y cada linea que sube
       la pregunta del paso cuenta. En escritorio sobra sitio y vuelve. */
    display: none;
    margin: 0 0 .5rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

.portada__titulo {
    margin: 0 0 .5rem;
    font-family: 'Kalnia', Georgia, 'Times New Roman', serif;
    font-size: clamp(1.25rem, 1.05rem + 1vw, 1.625rem);
    /* Kalnia es una display con mucho cuerpo: a 700 pesaba demasiado, y a 400
       quedaba igual de fina que las preguntas de los pasos. A 500 sigue siendo
       ligera pero se lee como el titulo de la pagina. */
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .01em;
    color: var(--burdeos);
}

.portada__entrada {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--tinta-suave);
}

/* Va aqui, detras de las reglas de la portada, y no en el media de arriba:
   alli las reglas base de la portada vendrian despues y ganarian por orden,
   con lo que el escritorio saldria compacto tambien. */
@media (min-width: 40em) {
    .portada {
        margin-bottom: 2rem;
        padding-bottom: 1.75rem;
    }

    .portada__antetitulo {
        display: block;
    }

    .portada__titulo {
        margin-bottom: .75rem;
    }

    .portada__entrada {
        font-size: inherit;
        line-height: inherit;
    }
}

/* --------------------------------------------------------------- Progreso -- */

.progreso-envoltorio {
    margin-bottom: 1.75rem;
}

.progreso {
    display: block;
    width: 100%;
    height: 4px;
    border: 0;
    border-radius: 2px;
    background-color: var(--crema-hundida);
    color: var(--azul);
    appearance: none;
    -webkit-appearance: none;
}

.progreso::-webkit-progress-bar {
    background-color: var(--crema-hundida);
    border-radius: 2px;
}

.progreso::-webkit-progress-value {
    background-color: var(--azul);
    border-radius: 2px;
    transition: width .3s ease;
}

.progreso::-moz-progress-bar {
    background-color: var(--azul);
    border-radius: 2px;
}

/* ------------------------------------------------------------------ Pasos -- */

.paso {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.paso[hidden] {
    display: none;
}

.paso__pregunta {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 1.5rem;
    font-family: 'Kalnia', Georgia, 'Times New Roman', serif;
    font-size: var(--pregunta);
    /* 400, igual que el titulo: Kalnia es una display con mucho cuerpo y a 600
       cada pregunta gritaba. El tamano ya la distingue del resto del paso. */
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .04em;
    /* En burdeos, igual que el titulo de la portada: el formulario habla con
       un solo color de marca y la pregunta de cada paso es lo que tiene que
       llamar la atencion. */
    color: var(--burdeos);
}

.paso__pregunta:focus {
    outline: none;
}

.paso--corte h2 {
    font-family: 'Kalnia', Georgia, 'Times New Roman', serif;
    font-size: var(--pregunta);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 1rem;
}

/* Los encabezados reciben el foco por codigo al cambiar de paso, para que un
   lector de pantalla anuncie la pregunta nueva. Como el usuario no ha navegado
   hasta ahi con el teclado, no se le pinta anillo: seria confuso. Los controles
   reales si lo conservan. */
.paso--corte h2:focus {
    outline: none;
}

.paso--corte p {
    margin: 0 0 1.5rem;
}

/* --------------------------------------------------------------- Opciones -- */

.opciones {
    display: grid;
    gap: .75rem;
    /* Todas las filas con la misma altura, para que una opcion cuyo texto ocupa
       dos lineas no deje a sus companeras mas bajas. */
    grid-auto-rows: 1fr;
}

.opciones--tarjetas {
    grid-template-columns: 1fr;
}

/* Dos columnas fijas, no `auto-fit`.

   Con auto-fit los cuatro tramos de invitados caian en tres y uno, y ese
   ultimo solo colgando debajo se lee como un boton distinto de los otros
   tres. Dos y dos se leen como una sola familia de opciones. */
.opciones--pildoras,
.opciones--tarjetas {
    grid-template-columns: 1fr;
}

@media (min-width: 30em) {
    .opciones--pildoras,
    .opciones--tarjetas {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Las dos tarjetas con foto -tipo de cliente y tipo de evento- van lado a lado
   tambien en movil. Apiladas, cada foto ocupaba casi toda la pantalla y la
   segunda opcion quedaba debajo del pliegue: habia que bajar para descubrir que
   existia. Asi se ven las dos a la vez.

   Solo las de foto: el paso de espacio va como lista de radios, que con sus
   nombres largos -"Bodegas Campos (Lineros, 32)"- se lee mejor que cualquier
   rejilla. */
.opciones--fotos {
    grid-template-columns: repeat(2, 1fr);
}

/* Las tarjetas de evento se reparten el ancho disponible: hoy son dos y ocupan
   media pantalla cada una, pero si desde el panel se anaden mas, la rejilla se
   reorganiza sola sin tocar esto. */
@media (min-width: 34em) {
    .opciones--eventos {
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    }
}

.opciones--eventos .tarjeta__cuerpo {
    gap: .625rem;
    padding-bottom: .875rem;
}

.opciones--eventos .tarjeta__texto {
    gap: .5rem;
    letter-spacing: .04em;
}

/* Radios de verdad: se ve la marca, no un boton. Los usan el tramo de
   invitados y el paso de espacio.

   Los tramos son una escala, y verlos como lista con su marca dice "elige un
   punto de esta escala" mejor que cuatro botones sueltos. Los espacios llevan
   nombres largos que en tarjeta se partian en varias lineas.

   El input nativo se oculta pero sigue enfocable: nada de `display: none`, que
   lo sacaria del orden de tabulacion y del arbol de accesibilidad. */
.opciones--radios {
    gap: 0;
    grid-auto-rows: auto;
    grid-template-columns: 1fr;
}

.radio input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.radio__cuerpo {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 3rem; /* 48px: por encima del minimo tactil de 44px */
    padding: .5rem .25rem;
    cursor: pointer;
    border-bottom: 1px solid var(--crema-hundida);
    transition: color .15s ease;
}

.radio:last-child .radio__cuerpo {
    border-bottom: 0;
}

.radio__marca {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    border: 1px solid var(--borde);
    border-radius: 50%;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.radio input:hover + .radio__cuerpo .radio__marca {
    border-color: var(--burdeos);
}

.radio input:focus-visible + .radio__cuerpo .radio__marca {
    outline: 3px solid var(--burdeos);
    outline-offset: 2px;
}

/* El punto de dentro es un box-shadow y no un pseudoelemento: asi crece desde
   el centro sin tener que posicionar nada. */
.radio input:checked + .radio__cuerpo .radio__marca {
    border-color: var(--burdeos);
    box-shadow: inset 0 0 0 .25rem var(--burdeos);
}

.radio input:checked + .radio__cuerpo {
    color: var(--burdeos);
    font-weight: 600;
}

.tarjeta__cuerpo,
.tarjeta__texto,
.pildora__texto {
    display: flex;
    align-items: center;
    justify-content: center;
    /* La etiqueta es la celda de la rejilla y se estira sola, pero su contenido
       no la llenaba: por eso la caja visible se quedaba del alto de su texto.
       Con esto todas las opciones se ven del mismo tamano y su texto queda
       centrado en vertical. */
    height: 100%;
    min-height: 3rem; /* 48px: por encima del minimo tactil de 44px */
    padding: .75rem 1rem;
    text-align: center;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

/* Tarjeta con fotografia: el borde y el fondo pasan al cuerpo, y el texto de
   dentro se queda sin caja propia para no dibujar un recuadro doble. */
.tarjeta__cuerpo {
    flex-direction: column;
    gap: .75rem;
    padding: 0 0 .875rem;
    overflow: hidden;
}

.tarjeta__cuerpo .tarjeta__texto {
    min-height: 0;
    padding: 0 .75rem;
    background: none;
    border: 0;
    border-radius: 0;
}

.tarjeta__foto {
    display: block;
    width: 100%;
    /* Relacion fija para que la maquetacion no salte mientras carga la imagen. */
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Las etiquetas de las opciones y los botones van en Mulish, no en Kalnia:
   Kalnia es una serif de display, pensada para titulares grandes, y a tamano de
   interfaz pierde legibilidad. La marca la reserva para encabezados. */
.tarjeta__texto {
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.tarjeta input,
.pildora input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.tarjeta input:hover + .tarjeta__cuerpo,
.tarjeta input:hover + .tarjeta__texto,
.pildora input:hover + .pildora__texto {
    border-color: var(--burdeos);
}

.tarjeta input:focus-visible + .tarjeta__cuerpo,
.tarjeta input:focus-visible + .tarjeta__texto,
.pildora input:focus-visible + .pildora__texto {
    outline: 3px solid var(--burdeos);
    outline-offset: 2px;
}

/* Estado marcado sin depender de JavaScript. */
.tarjeta input:checked + .tarjeta__cuerpo,
.tarjeta input:checked + .tarjeta__texto,
.pildora input:checked + .pildora__texto {
    background: var(--burdeos);
    border-color: var(--burdeos);
    color: var(--blanco);
    font-weight: 600;
}

/* Un campo de apoyo dentro de un paso de opciones: separado para que no compita
   con las opciones, que son lo principal de ese paso. */
.campo--apoyo {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--borde);
}

/* La pregunta de apoyo -"Ya teneis una cifra mas concreta"- va en burdeos,
   como las preguntas de los pasos: tambien es una pregunta, aunque sea
   opcional. El "(opcional)" conserva su gris para que no pese igual. */
.campo--apoyo > label {
    color: var(--burdeos);
}

/* Etiqueta de un grupo de opciones que no es un <label> porque no apunta a un
   solo control, sino a un radiogroup entero. */
.etiqueta-grupo {
    display: block;
    margin-bottom: .625rem;
    font-weight: 600;
}

.pildora[hidden] {
    display: none;
}

.pildora__texto--con-icono {
    gap: .625rem;
}

.pildora__icono {
    flex: 0 0 auto;
    /* Hereda el color del texto, asi que se vuelve blanco al seleccionar. */
    color: var(--burdeos);
    transition: color .15s ease;
}

/* Al marcar, el icono tiene que heredar el color del texto: si no, se queda
   azul sobre el fondo azul de la opcion seleccionada y desaparece.
   Se cubren las dos estructuras: la pildora suelta y la tarjeta con foto. */
.pildora input:checked + .pildora__texto .pildora__icono,
.tarjeta input:checked + .tarjeta__cuerpo .pildora__icono {
    color: currentColor;
}

/* ---------------------------------------------------------------- Campos -- */

.campo {
    margin-bottom: 1.25rem;
}

.campo[hidden] {
    display: none;
}

/* Un campo que aparece justo debajo de un grupo de opciones necesita aire: si
   no, el texto libre de "Otro" queda pegado a las pildoras. */
.opciones + .campo {
    margin-top: 1.5rem;
}

/* La separacion va en el propio campo y no en lo que viene despues, para que
   al ocultarse el campo desaparezca con el. Antes la linea se quedaba flotando
   sin nada encima al elegir "Otro pais". */
.campo--separado {
    padding-bottom: 1.5rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--borde);
}

.campo label {
    display: block;
    margin-bottom: .375rem;
    font-weight: 600;
}

.obligatorio {
    color: var(--rojo);
}

.opcional {
    font-weight: 400;
    color: var(--tinta-suave);
    font-size: .9375rem;
}

.campo input[type='text'],
.campo input[type='tel'],
.campo input[type='email'],
.campo input[type='date'],
.campo input[type='number'],
.campo select,
.campo textarea {
    width: 100%;
    min-height: 3rem;
    /* Sin sangria lateral: la linea inferior hace de campo, y un texto
       separado de su propia linea parece flotar. */
    padding: .625rem 0;
    font-family: inherit;
    font-size: 1rem; /* 16px evita el zoom automatico de iOS al enfocar */
    color: var(--tinta);
    /* Solo linea abajo, como los campos de bodegascampos.com. La caja con
       borde y fondo blanco sobre un panel tambien blanco solo anadia ruido:
       lo que dice "aqui se escribe" es la linea. */
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--borde);
    border-radius: 0;
    transition: border-color .2s ease;
}

/* Sin las flechitas de subir y bajar: sobre un campo que es solo una linea
   desentonan, y para una cifra de invitados no sirven -nadie llega a 160 a
   golpe de clic-. El teclado del movil sigue siendo numerico por el
   inputmode del propio campo. */
.campo input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.campo input[type='number']::-webkit-outer-spin-button,
.campo input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.campo input[type='text']:hover,
.campo input[type='tel']:hover,
.campo input[type='email']:hover,
.campo input[type='date']:hover,
.campo input[type='number']:hover,
.campo select:hover,
.campo textarea:hover {
    border-bottom-color: var(--tinta-suave);
}

/* La linea se engorda y se tine al enfocar: el anillo de foco general sigue
   ahi, pero asi el campo activo se distingue tambien de un vistazo. */
.campo input[type='text']:focus,
.campo input[type='tel']:focus,
.campo input[type='email']:focus,
.campo input[type='date']:focus,
.campo input[type='number']:focus,
.campo select:focus,
.campo textarea:focus {
    border-bottom: 2px solid var(--burdeos);
    padding-bottom: calc(.625rem - 1px);
    /* El anillo de foco general dibuja una caja entera, y sobre un campo que
       es solo una linea se lee como otro campo encima. Aqui el indicador de
       foco es la propia linea, que engorda al doble y se tine: se ve igual de
       bien y no contradice el diseno. */
    outline: none;
}

.campo textarea {
    resize: vertical;
}

.campo input[aria-invalid='true'],
.campo select[aria-invalid='true'],
.campo textarea[aria-invalid='true'] {
    border-color: var(--rojo);
}

.campo--check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .625rem;
    align-items: start;
}

.campo--check input {
    width: 1.25rem;
    height: 1.25rem;
    margin: .25rem 0 0;
}

.campo--check label {
    margin: 0;
    font-weight: 400;
}

.campo--check .error {
    grid-column: 1 / -1;
}

.ayuda {
    display: block;
    margin-top: .375rem;
    color: var(--tinta-suave);
    font-size: .9375rem;
}

/* Oculto a la vista pero disponible para lectores de pantalla: usado por la
   region viva del buscador de ubicaciones, que anuncia cuantos resultados hay
   sin ocupar espacio en pantalla. */
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.buscador__resultados {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--blanco);
}

.buscador__resultados[hidden] {
    display: none;
}

.buscador__opcion {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    cursor: pointer;
}

.buscador__opcion + .buscador__opcion {
    border-top: 1px solid var(--borde);
}

.buscador__opcion:hover,
.buscador__opcion[aria-selected='true'] {
    background: var(--crema-hundida);
}

.buscador__nombre {
    font-weight: 600;
}

.buscador__detalle {
    font-size: 0.85em;
    color: var(--tinta-suave);
}

/* --------------------------------------------------------------- Mensajes -- */

.error {
    margin: .5rem 0 0;
    color: var(--rojo);
    font-size: .9375rem;
    min-height: 0;
}

.error:empty {
    display: none;
}

.error--general {
    margin-bottom: 1rem;
}

.aviso {
    padding: 1rem;
    background: var(--crema-hundida);
    border-left: 3px solid var(--burdeos);
    border-radius: var(--radio);
}

.aviso p {
    margin: 0 0 .75rem;
}

.aviso p:last-child {
    margin-bottom: 0;
}

.aviso--legal {
    margin-bottom: 1.25rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--tinta-suave);
}

.confirmacion {
    text-align: center;
    padding: 2rem 1rem;
}

.confirmacion h2 {
    font-family: 'Kalnia', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    letter-spacing: .04em;
    margin: 0 0 .75rem;
}

.confirmacion h2:focus {
    outline: none;
}

/* --------------------------------------------------------------- Botones -- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: .75rem 2rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--radio);
    cursor: pointer;
    /* Algunos botones son enlaces: sin esto salen subrayados. */
    text-decoration: none;
    transition: background-color .15s ease;
}

.boton:hover {
    text-decoration: none;
}

.boton[hidden] {
    display: none;
}

/* Botones de flecha, como los enlaces de bodegascampos.com: el texto encima
   y debajo una linea larga rematada en punta. No son cajas de color, son un
   gesto de direccion, y eso es justo lo que hace un paso de formulario.

   La flecha se dibuja con bordes sobre un pseudoelemento en vez de traer un
   icono: son cuatro lineas de CSS, hereda el color y no anade una peticion. */
.boton--flecha {
    display: inline-flex;
    flex-direction: column;
    /* stretch y no flex-end: con flex-end el trazo se encoge al ancho de su
       contenido, que es cero, y solo queda la punta flotando. */
    align-items: stretch;
    gap: .5rem;
    /* Algo mas ancho que la propia palabra, no mucho mas: con mas trazo la
       flecha se come la navegacion y deja de leerse como un boton. */
    min-width: 6.5rem;
    padding: .5rem 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--tinta-suave);
    font-weight: 600;
}

/* El trazo: una linea de 1px con la punta al final. */
.boton__trazo {
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    background: currentColor;
}

.boton__trazo::after {
    content: '';
    position: absolute;
    top: 50%;
    width: .5rem;
    height: .5rem;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
}

.boton--siguiente .boton__trazo::after {
    right: 0;
    transform: translateY(-50%) rotate(45deg);
}

.boton--volver .boton__trazo::after {
    left: 0;
    transform: translateY(-50%) rotate(-135deg);
}

/* El texto se alinea hacia donde apunta la flecha; el trazo ocupa todo el
   ancho en los dos casos. */
.boton--volver .boton__texto {
    text-align: left;
}

.boton--siguiente .boton__texto {
    text-align: right;
}

.boton--siguiente {
    color: var(--burdeos);
}

/* El hover solo estira el trazo hacia donde apunta, sin cambiar de color.

   Antes tambien tenia el conjunto, y como el color y el alargamiento se
   animaban a la vez, la flecha parecia cambiar de color a mitad del gesto
   -en Volver, ademas, de gris a burdeos-. El movimiento ya dice por si solo
   hacia donde lleva el boton. */
.boton--flecha .boton__trazo {
    transition: transform .25s ease;
    transform-origin: left center;
}

.boton--siguiente:hover .boton__trazo {
    transform: scaleX(1.08);
}

.boton--volver .boton__trazo {
    transform-origin: right center;
}

.boton--volver:hover .boton__trazo {
    transform: scaleX(1.08);
}

.boton--flecha[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

.boton--flecha[disabled]:hover .boton__trazo {
    transform: none;
}

/* El de enviar si sigue siendo un boton macizo: es la accion final y tiene
   que pesar mas que un paso intermedio. */
.boton--principal {
    background: var(--burdeos);
    color: var(--blanco);
    text-decoration: none;
}

.boton--principal:hover {
    background: var(--burdeos-oscuro);
    color: var(--blanco);
}

.boton--principal[disabled] {
    opacity: .6;
    cursor: not-allowed;
}

/* Lo usan los enlaces de la pantalla de confirmacion, que no son pasos. */
.boton--secundario {
    background: transparent;
    border-color: var(--borde);
    color: var(--tinta);
}

.boton--secundario:hover {
    border-color: var(--tinta-suave);
    color: var(--tinta);
}

.boton--enviar {
    width: 100%;
    margin-top: .5rem;
}

.navegacion {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}

/* Salidas de una pantalla terminal: la confirmacion y el corte. En movil se
   apilan a lo ancho para que no queden dos botones estrechos. */
.acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: 1.75rem;
}

.acciones .boton {
    flex: 1 1 14rem;
}

.paso--corte .acciones {
    justify-content: flex-start;
}

/* La navegacion solo tiene el boton de siguiente cuando no hay "Volver":
   se empuja a la derecha para que no quede huerfano a la izquierda. */
.navegacion #boton-anterior[hidden] + #boton-siguiente {
    margin-left: auto;
}

/* -------------------------------------------------------------------- Pie -- */

/* Mismo fondo que el pie de bodegascampos.com, copiado de sus estilos
   computados: el degradado burdeos va encima de la filigrana de barriles y los
   dos se funden en `soft-light`, que es lo que la deja tan tenue.
   El orden importa: en CSS la primera capa de background-image es la de arriba. */
.pie {
    padding: 3rem 1.25rem 1.75rem;
    color: var(--blanco);
    background-color: var(--burdeos);
    background-image:
        radial-gradient(circle, #711627 39%, #1c1c1c 93%),
        url('../images/filigrana-pie.webp');
    background-position: 100% 50%, 100% 50%;
    background-size: contain, contain;
    background-repeat: no-repeat, no-repeat;
    background-blend-mode: soft-light, soft-light;
}

.pie__columnas {
    display: grid;
    gap: 2.5rem;
    max-width: 72rem;
    margin: 0 auto;
    text-align: center;
}

@media (min-width: 56em) {
    .pie__columnas {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
        gap: 2rem 3rem;
        text-align: left;
        align-items: start;
    }
}

.pie__logo {
    width: min(280px, 70vw);
}

.pie__certificacion {
    margin: 2rem 0 0;
}

.pie__sello {
    width: min(120px, 32vw);
}

.pie__certificacion figcaption {
    margin-top: .5rem;
    font-size: .8125rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .85);
}

/* Los encabezados del pie: Kalnia con mucho tracking, como en la web. */
.pie__titulo {
    font-family: 'Kalnia', Georgia, 'Times New Roman', serif;
    font-size: var(--titulo-pie);
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--blanco);
    margin: 0 0 1.25rem;
}

.pie__titulo--redes {
    margin-top: 2.5rem;
    letter-spacing: .2em;
}

.pie__lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pie__lista li {
    margin-bottom: .75rem;
}

/* Las sedes: tres en fila en pantalla ancha, apiladas en movil. */
.pie__sedes {
    display: grid;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 34em) {
    .pie__sedes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

.pie__sede-nombre {
    display: inline-block;
    margin: 0 0 .75rem;
    padding-bottom: .35rem;
    font-family: 'Kalnia', Georgia, 'Times New Roman', serif;
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--blanco);
    border-bottom: 1px solid rgba(255, 255, 255, .5);
}

.pie__sede-dato {
    margin: 0 0 .5rem;
    font-size: .9375rem;
    line-height: 1.45;
}

.pie__redes {
    display: flex;
    justify-content: center;
    gap: .75rem;
}

@media (min-width: 56em) {
    .pie__redes {
        justify-content: flex-start;
    }
}

.pie__redes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--blanco);
}

.pie__legal,
.pie__creditos {
    max-width: 72rem;
    margin: 2.5rem auto 0;
    text-align: center;
    font-size: .8125rem;
}

.pie__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, .35);
}

/* Las barras separadoras se dibujan con un borde, no con content: '|'. Un
   pseudo-elemento dentro del <a> entra en el arbol de accesibilidad, y el enlace
   pasaria a anunciarse como "barra vertical Politica de privacidad". Un borde no
   lo lee nadie.

   Solo cuando los cinco enlaces caben en una linea: al repartirse en varias, el
   primero de cada linea nueva arrastraba su borde y aparecia una barra suelta
   colgando a la izquierda. */
@media (min-width: 48em) {
    .pie__legal a + a {
        padding-left: 1rem;
        border-left: 1px solid rgba(255, 255, 255, .55);
    }
}

/* Sobre el burdeos el blanco pasa AA de sobra; el burdeos de antes, que era el
   color de enlace heredado, quedaba ilegible sobre este fondo. */
/* El :visited se declara aparte a proposito: sin el, un enlace ya visitado se
   pinta con el color heredado de `a` (burdeos) y desaparece sobre este fondo.
   getComputedStyle miente sobre :visited por privacidad, asi que el fallo no se
   detecta inspeccionando, solo mirando. */
.pie a,
.pie a:visited {
    color: var(--blanco);
    text-decoration: none;
}

.pie a:hover,
.pie a:focus-visible {
    text-decoration: underline;
}

.pie__creditos {
    margin-top: 1rem;
    color: rgba(255, 255, 255, .85);
}

/* El anillo de foco azul no se ve sobre el burdeos. */
.pie :focus-visible {
    outline-color: var(--blanco);
}

/* ------------------------------------------------------ Movimiento reducido -- */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Aviso de reCAPTCHA en lugar de su sello flotante. */
.grecaptcha-badge {
    visibility: hidden;
}

.aviso-captcha {
    margin: .75rem 0 0;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--tinta-suave);
}