/* ══════════════════════════════════════════════════════════════════════
   VALDECAMELLAS · la vista de móvil
   ──────────────────────────────────────────────────────────────────────
   Esta hoja va la última de todas —antes de `</head>`, y en las seis
   páginas que llevan su `<style>` dentro del cuerpo, antes de
   `</body>`—, porque existe justamente para corregir lo que cada página
   trae escrito en su propio `<style>`.

   Por qué `!important`. Los estilos de cada página están dentro de ella:
   son 111 ficheros y reglas como `.winery-card .card-subtitle`, que
   ganan a cualquier selector razonable que se escriba aquí. La
   alternativa era editar los 111 a mano, sección por sección, y dejar
   tres copias que se desincronizan a la primera. Una hoja correctora
   que sólo actúa por debajo de 1024 px, y que sólo toca cuerpo,
   espaciado y márgenes, se lee y se revierte de una vez; los cientos de
   parches no.

   Todo vive dentro de `max-width: 1023px`, que es el mismo corte que ya
   usa la web para pasar al menú de móvil. El diseño de escritorio no se
   toca en absoluto.

   Lo que se corrige, por orden de importancia:

   1 · LOS RÓTULOS EN VERSALITAS. La casa los escribe con un espaciado
       muy abierto —hasta 0,45 em—. En una pantalla ancha es elegante;
       en una de 375 px, «VALDECAMELLAS · RIBERA DEL DUERO» medía 415 px
       y se salía por los dos lados, y de paso empujaba la rejilla de la
       página del viñedo 48 px fuera de la pantalla. Bajando el
       espaciado a 0,16 em la misma línea mide 250 px: se lee mejor y
       sobra aire a los lados.

   2 · LA LETRA MENUDA. Había rótulos de 7,5 px y textos de 9. En un
       teléfono, por debajo de 11 px no se lee: se adivina. El suelo
       queda en 11 px para los rótulos y 12 para lo que se lee seguido.

   3 · EL AIRE. Un solo margen lateral —24 px— en las secciones que se
       habían quedado pegadas al canto.

   4 · LAS ZONAS DE TOQUE. Nada por debajo de 40 px de alto en lo que
       haya que pulsar con el dedo.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {

/* ══ 1 · LOS RÓTULOS EN VERSALITAS ═══════════════════════════════════
   Mismo criterio para todos: 11 px de cuerpo y 0,16 em de espaciado. */
.vinedo-eyebrow,
.tm-eyebrow,
.tf-sec-mark,
.pp-tag,
.pi-eyebrow,
.pc-eyebrow,
.pcs-label,
.pcs-sub,
.mt-eyebrow,
.cata-label,
.contacto-label,
.eyebrow,
.qk-num,
.qk-house,
.qk-here,
.mh-kicker,
.soil-name,
.follow-eyebrow,
.section-name,
.col-eyebrow,
.maitre-eyebrow,
.article-tag,
.alloc-stat-label,
.sidebar-label,
.notes-label,
.pcw-quota-label,
.mp-fig-num,
.vinedo-stats .lbl,
.lbl,
.c-lbl,
.toc-label,
.mn-label,
.ai-eyebrow,
.share-label,
.rc-tag,
.ah-breadcrumb a,
.ah-breadcrumb span,
.is-label,
.is-season,
.rh-eyebrow,
.rz-comp-abre,
.rz-idx-abre,
.rz-hint,
.tw-idx-opts,
.tw-idx-abre,
.tw-idx-pueblo,
.tw-hint,
#twTourLabel,
.ha,
.layer-tab,
/* el concierge, de la mitad para abajo */
.phase-tag,
.salon-eyebrow,
.sp-label,
.req-eyebrow,
.disc-eyebrow,
/* la sala privada */
.qb-label,
.af-label,
.gg-eyebrow,
.gw-role,
.d-lbl,
.cava-skip,
/* el terruño */
.climate-label,
/* los números del Cuaderno */
.figure-folio,
.cp-tag,
.pa-eyebrow,
.iv-tag,
.pe-tag,
.pe-num,
.in-dir,
.in-vol,
.panel-title,
.tm-tiny-link,
.tf-back,
.wines-display-eyebrow,
.lozenge {
    font-size: 11px !important;
    letter-spacing: .16em !important;
}

/* El rótulo del viñedo lleva una rayita delante que en móvil se comía
   40 px de los 327 disponibles. Se acorta y se le deja partir. */
.vinedo-eyebrow::before,
.vinedo-eyebrow::after { width: 18px !important; }
.vinedo-eyebrow { gap: 9px !important; flex-wrap: wrap; }

/* ══ 2 · LA LETRA MENUDA ═════════════════════════════════════════════
   Lo que se lee seguido —pies de foto, fechas, notas, botones— sube a
   12 px, con el espaciado justo para que no parezca un telegrama. */
.card-subtitle,
.card-more,
.ih-fig-caption,
.article-meta,
.article-author,
.article-author .reading,
.maitre-role,
.pa-d-fecha,
.gn-text,
.gn-link,
.pcw-cta,
.btn-primary,
.btn-secondary,
.text-link,
.lost a,
.tm-section-title,
.toggle-text,
.scroll-hint,
.qk-foot,
.pp-mark,
.it-meta-item,
.it-signature,
.req-promise,
.req-legend span,
.req-field label,
.submit-note,
.ed-footer span,
.opt,
.chip,
.qb-sub,
.col-fine,
.rc-meta span,
.reading,
.at-price-sub,
.cava-mark span,
th,
.vc-ck-t,
.vc-ck-si,
.vc-ck-no,
figcaption,
cite,
small,
dt {
    font-size: 12px !important;
}
.vc-ck-t { letter-spacing: .14em !important; }
.pa-d-fecha, .article-meta, .ih-fig-caption, figcaption, cite { letter-spacing: .02em !important; }

/* Los datos sueltos de las fichas —«3,79 ha», «830–870 m»— iban a 10 px
   y son justamente lo que se va a mirar. */
.parcel-meta span,
.tm-plot-data span,
.mh-meta span,
.cm-label span,
.ih-meta span,
.ih-rule-top span,
.mh-rule-top span,
.private-area strong,
.private-area span,
.tm-soil-copy p {
    font-size: 11.5px !important;
}

/* Las palabras que la animación parte una a una heredan el cuerpo del
   titular; sin esto se quedaban con el suyo propio, más pequeño. */
.wow-w, .wow-w span, .split-char { font-size: inherit !important; }

/* El aviso de cookies es lo primero que ve un visitante, y en un
   teléfono se comía media pantalla: 18 px de acolchado, texto a 15 y
   los dos botones uno debajo del otro. Se aprieta sin que deje de
   leerse, y los botones se reparten el ancho. */
.vc-cookies {
    padding: 16px 16px 14px !important;
    font-size: 14px !important;
    line-height: 1.42;
}
.vc-cookies p { margin: 0 0 10px !important; }
.vc-cookies .vc-ck-links { margin-bottom: 12px !important; }
.vc-cookies .vc-ck-acts { gap: 8px !important; }
.vc-cookies button { padding: 9px 12px !important; flex: 1 1 auto; }

/* La portada lleva dos chips fijos abajo a la izquierda —la cuenta de
   la vendimia y el parte del día— que suman unos 120 px. El texto del
   héroe se coloca a 50 px del borde inferior, y en un teléfono su
   última línea quedaba justo debajo del chip de la vendimia: «hecho
   donde se cultiva, por las manos que la podaron» partido por la mitad
   por un rótulo. Se sube el texto por encima de los dos. */
body.homepage .page-homepage .swiper .text-center.absolute {
    bottom: 148px !important;
}

/* ══ 3 · EL AIRE ═════════════════════════════════════════════════════
   El cierre del terruño se salía 24 px por cada lado contando con un
   acolchado del contenedor que en móvil no existe: el texto acababa
   pegado al canto, a 0 px. */
.tm-closing {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* El filete de la cabecera del Cuaderno pone el rótulo a la izquierda y
   el lugar a la derecha, con dos rayitas decorativas que se llevan un
   18 % del ancho cada una. En un teléfono «FRESNILLO DE LAS DUEÑAS ·
   RIBERA DEL DUERO» se partía en seis renglones de dos palabras. Se
   quitan las rayitas, se baja el espaciado y los dos rótulos van
   centrados, uno debajo del otro. */
.mh-rule-top {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 5px;
    letter-spacing: .16em !important;
    text-align: center;
}
.mh-rule-top::before,
.mh-rule-top::after { display: none !important; }
.mh-rule-top span { padding: 0 6px !important; }

/* Los textos justificados —once sólo en el viñedo— se compusieron para
   una columna ancha. A 327 px la justificación abre ríos blancos entre
   las palabras: «Los  viñedos  de  Valdecamellas  suman». Se probó a
   dejarla con guión de partir y no basta, porque lo que sobra no son
   sílabas sino renglones cortos. En un teléfono se alinea a la
   izquierda, que es lo que hace cualquier libro en columna estrecha; en
   escritorio sigue justificado. */
p[style*="justify"], .lead, article p, .split-text p, .vinedo-section p {
    text-align: left !important;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* ── LOS DOS VINOS, UNO DEBAJO DEL OTRO ──────────────────────────────
   La página se concibió como una pantalla única: `main` lleva
   `height:100vh; overflow:hidden` escrito en línea, y dentro las dos
   fichas van en un carrusel horizontal con flechas. En un escritorio
   eso funciona. En un teléfono deja ver un solo vino —y cortado por
   abajo, porque la ficha apilada pide 537 px y el carrusel le daba
   300—, y el segundo sólo aparece si al visitante se le ocurre
   arrastrar de lado. Con dos vinos en toda la casa, esconder uno es
   justo lo contrario de lo que la página quiere decir.

   Se suelta la altura, se desarma el carrusel y se apilan: botella
   arriba, nombre debajo, un filete entre los dos vinos. */
main#swup.WINES {
    height: auto !important;
    overflow: visible !important;
}
.wines-display {
    height: auto !important;
    padding: 92px 0 78px !important;
}
/* `.page` trae del tema 150 px de relleno al pie. Con la altura
   recortada no se veian; sueltos, y sumados a los 78 de aqui, la
   pagina —que no lleva pie— acababa en 228 px de blanco. */
main#swup.WINES .page { padding-bottom: 0 !important; }
.wines-display-header {
    margin-bottom: 46px !important;
    padding: 0 22px !important;
}
.wines-display-sub { max-width: 340px; }

.wines-slider-wrap {
    display: block !important;
    padding: 0 22px !important;
}
.slider-arrow { display: none !important; }

/* En columna y no en bloque: a `display: block`, los saltos de linea
   que hay entre las dos `<article>` cuentan como texto y meten una
   linea vacia de 46 px entre los dos vinos. En flex no cuentan. */
.wines-cards-row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
}
.wines-cards-row .wine-card {
    display: flex !important;
    flex-direction: column !important;
    flex: none !important;
    width: 100% !important;
    padding: 0 0 52px !important;
    border-right: none !important;
    text-align: center;
    gap: 0;
}
.wines-cards-row .wine-card + .wine-card {
    padding-top: 52px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.wines-cards-row .wine-card:last-child { padding-bottom: 0 !important; }

/* La botella primero: es lo que se reconoce de lejos. */
.wine-card-bottle {
    order: -1;
    padding: 0 !important;
    margin-bottom: 32px;
}
.wine-card-bottle img {
    height: 310px !important;
    max-height: none !important;
}
.wine-card-info {
    width: 100% !important;
    min-width: 0;
    flex: none !important;
    padding-right: 0 !important;
}
.wine-card-title { font-size: 21px !important; margin-bottom: 15px !important; }
.wine-card-rule { width: 28px !important; margin: 0 auto 18px !important; }
.wine-card-desc {
    font-size: 14px !important;
    max-width: 290px;
    margin: 0 auto 24px !important;
}
/* La flecha estaba oculta porque en escritorio aparece al pasar por
   encima. En un teléfono no hay «encima»: se deja siempre visible, que
   es la única señal de que la ficha lleva a alguna parte. */
.wine-card-arrow {
    display: inline-block !important;
    color: #B89760;
    margin: 0 auto;
}
.wine-card-series { display: none; }

/* La ficha entra desde 46 px mas abajo y con opacidad cero, en 1,15 s
   y con escalonado. En el carrusel las dos estaban a la vez en
   pantalla y entraban juntas; apiladas, el segundo vino queda a 975
   px y se llega a el bajando, de modo que durante un segundo largo
   no hay nada donde va la botella. Mismo criterio que en el
   Concierge: la entrada se acorta. */
.wine-card.wow-card {
    transition-duration: .45s !important;
    transition-delay: 0s !important;
}

/* Los tres datos del clima del Terruño —horas de sol, lluvia media y
   salto térmico— iban en tres columnas fijas que suman 589 px dentro de
   un hueco de 327. El tercero se quedaba entero fuera de la pantalla y
   el segundo cortado: se leía «450 l/m² · LLUVIA MEDIA ANU…». Y no era
   un carrusel, no se podía arrastrar: simplemente faltaba. Uno por
   línea. */
.tm-metric-row {
    grid-template-columns: 1fr !important;
    row-gap: 14px;
}
.tm-metric { min-width: 0; }

/* El héroe del viñedo tenía el mismo mal que las secciones partidas: su
   caja interior no podía encoger por debajo de su contenido, y en
   neerlandés —que hace las palabras más largas— se iba a 464 px en una
   pantalla de 375. La entradilla acababa empezando en -24. */
.vinedo-hero .hero-content {
    min-width: 0;
    max-width: 100%;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* Las tres cifras del viñedo —parcelas, hectáreas, altitud— iban en
   tres columnas fijas. En castellano cabían justas; en neerlandés se
   salían. Que se repartan solas y bajen a la línea siguiente. */
.vinedo-stats {
    display: flex !important;
    flex-wrap: wrap;
    gap: 14px 26px;
}
.vinedo-stats .stat { min-width: 0; }

/* ══ 4 · EL VIÑEDO: LAS SECCIONES PARTIDAS ═══════════════════════════
   La rejilla es de una columna, pero sus celdas nacen con `min-width:
   auto`: no pueden encoger por debajo de lo que mide su contenido más
   ancho. Con el rótulo espaciado a 0,45 em ese mínimo eran 422 px, y la
   columna entera se iba 48 px fuera de la pantalla arrastrando foto,
   título y texto. Con `min-width: 0` la celda vuelve a caber. */
.vinedo-split > .split-image,
.vinedo-split > .split-text { min-width: 0; }

.vinedo-split .split-text { padding: 56px 24px !important; }
.vinedo-split .split-image { min-height: 46vh; }

/* El rastro de migas del artículo —«Cuaderno · Vol. I · Otoño 2025 ·
   Ciencia del viñedo»— iba en una línea sin partir. En neerlandés
   «Wijngaardwetenschap» lo empujaba 16 px fuera. Que baje de línea. */
.ah-breadcrumb { flex-wrap: wrap; row-gap: 6px; max-width: 100%; }
.ah-content { min-width: 0; max-width: 100%; }

/* El formulario del colofón del Cuaderno pedía 360 px de ancho mínimo.
   En un teléfono, con su margen, hay 331: se salía 29 px, y con él el
   botón «Suscribirme» y la línea del consentimiento. */
.col-form { min-width: 0 !important; }
.col-form input { min-width: 0; font-size: 17px !important; }
.col-consent { flex-wrap: wrap; }

/* Los cuatro números del Cuaderno van en una fila que se arrastra —561
   px en una pantalla de 375—, y el visitante ve el tercero cortado por
   la mitad sin ninguna señal de que aquello se desliza. Caben de sobra
   en dos filas de dos: se ven los cuatro de una vez. */
.issue-switch {
    flex-wrap: wrap;
    overflow-x: visible !important;
    justify-content: center;
    row-gap: 16px;
}

/* ══ EL CONCIERGE ════════════════════════════════════════════════════
   Los itinerarios alternos —los que llevan la foto a la derecha— se
   quedaban en dos columnas en el telefono, y la del texto media 137 px:
   una palabra por renglon, partida con guion. La pagina ya los apila,
   pero su regla para los pares (`.itinerary.flip`) va sin media query y
   con dos clases, de modo que gana siempre. */
.itinerary.flip { grid-template-columns: 1fr !important; }

/* ══ EL SUBSUELO ═════════════════════════════════════════════════════
   La página del subsuelo se hizo para una pantalla ancha, donde sus
   rótulos flotantes caen en sitios distintos. En un teléfono se
   amontonaban los cuatro de arriba —la barra del menú, «← Terruño /
   Valdecamellas / Mapa aéreo →», el aviso de «desliza para bajar» y el
   título— y los tres de abajo —la lectura del horizonte, la ficha de la
   parcela y el índice—. Se reparten: cada cosa en su franja. */
.rz-hint { top: 104px !important; }
.rz-intro { top: 54% !important; }
/* y abajo, cuatro franjas: la lectura del horizonte, los datos de la
   parcela, el botón de comparar y el índice. Antes caían las cuatro
   sobre los mismos setenta píxeles. */
.rz-read { bottom: 180px !important; }
.rz-meta { bottom: 140px !important; }
.rz-comp-abre { bottom: 118px !important; }

/* ══ EL MAPA AÉREO ═══════════════════════════════════════════════════
   Mismo caso que el subsuelo: abajo se juntaban la ficha de la parcela,
   el enlace al subsuelo, el aviso de «arrastra para girar» y el botón
   de sobrevolar la finca. El aviso se sube por encima de los otros. */
.tw-hint { bottom: 112px !important; }

/* El saludo al que vuelve —«la última vez visitaste Seis Lineos»— sale
   a 30 px del suelo, justo encima de los mismos controles. Dura seis
   segundos, pero en esos seis tapa la ficha, el enlace al subsuelo y el
   botón de sobrevolar. Se sube también. */
.tw-toast { bottom: 172px !important; max-width: calc(100% - 40px); }

/* ══ 5 · LAS ZONAS DE TOQUE ══════════════════════════════════════════
   Un enlace de 13 px de alto se falla más de lo que se acierta. */
.mm-bar-logo { padding: 12px 0; }
.tm-tiny-link,
.tf-back,
.text-link,
.vc-ck-si,
.vc-ck-no,
.btn-primary,
.btn-secondary,
.layer-tab {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* == 6 . EL MARGEN QUE NADIE PUSO ===================================
   Ninguna hoja de la casa toca el margen de <figure>, asi que todas
   las fotos heredan el del navegador: `margin: 1em 40px`. En un
   escritorio esos 40 px por lado pasan por sangria elegante; en un
   telefono de 375 px son 80 px de nada -el 21 % del ancho- y, cuando
   la figura va suelta dentro de una seccion oscura, el hueco se ve
   como una franja vacia a los lados de la foto.

   Le pasa a las seis figuras del Concierge (la del encabezado y el
   retrato del Maitre pierden 124 px cada una) y a las de los cinco
   articulos del Cuaderno. Se quita el margen lateral y se deja el
   vertical, que es el que da aire entre foto y texto. */
figure {
    margin-left: 0;
    margin-right: 0;
}

/* == 7 . EL ROTULO DE CABECERA DEL CONCIERGE ========================
   Fila flex sin permiso para partirse: raya de 56 px, pastilla y un
   rotulo largo, todo en versalitas con 0,42 em de espaciado. En
   neerlandes -«Private gastvrijheid . Concierge Prive»- pedia 340 px
   dentro de una columna de 331, y la rejilla se salia nueve pixeles
   por la derecha: la foto acababa mas cerca del borde que el texto.
   Mismo remedio que en `.mh-rule-top`. */
.ih-rule-top {
    flex-wrap: wrap;
    row-gap: 8px;
    letter-spacing: .16em !important;
}
.ih-rule-top .lozenge { letter-spacing: .14em !important; }

/* == 8 . LAS ENTRADAS DEL CONCIERGE, MAS CORTAS =====================
   La pagina se destapa por partes segun entra en pantalla, con
   animaciones de entre uno y dos segundos. En un escritorio es
   elegancia; en un telefono, donde una figura ocupa media pantalla y
   uno baja de un impulso, la cortina de 1,6 s convierte cada foto en un
   hueco blanco mientras esta a la vista.

   El disparo ya se adelanta medio viewport desde el JS de la pagina.
   Aqui se acorta ademas lo que dura, que es la otra mitad del arreglo:
   ni la cortina ni los fundidos pasan ya de siete decimas. */
.reveal-clip {
    transition: -webkit-clip-path .6s cubic-bezier(.7, 0, .15, 1),
                        clip-path .6s cubic-bezier(.7, 0, .15, 1) !important;
}
.phase,
.itinerary { transition-duration: .5s !important; }
.phase:nth-child(1).visible,
.phase:nth-child(2).visible,
.phase:nth-child(3).visible { transition-delay: 0s !important; }

/* La figura del encabezado esperaba nueve decimas antes de empezar a
   aparecer. En el telefono queda por debajo del texto: nadie la ve
   esperar, solo la ve llegar tarde. */
.ih-figure {
    animation-delay: .15s !important;
    animation-duration: .7s !important;
}
.ih-figure img,
.maitre-portrait img,
.salon-figure img,
.it-figure img { transition-duration: .8s !important; }
}