/* Ecoribera — estilos de la web. Sin dependencias.
   Paleta sacada del producto: naranja, verde hoja, tierra y crema. Colores planos: sin degradados ni sombras.
   Letras: League Gothic (títulos, como la letra de las cajas), Castoro (texto) e IBM Plex Mono (datos). */

@font-face { font-family: 'League Gothic'; src: url('../fonts/league-gothic-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Castoro'; src: url('../fonts/castoro-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Castoro'; src: url('../fonts/castoro-italica-latin.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --crema: #f4ede1;
  --crema-oscura: #e9dfcd;
  --papel: #fbf7f0;
  --tinta: #2a2118;
  --tierra: #6b4e33;
  --kraft: #b98e58;
  --naranja: #e46c1e;
  --naranja-texto: #a84a0c;
  --verde: #2f5a35;
  --error: #8f1f0b;
  --titulo: 'League Gothic', 'Arial Narrow', Impact, sans-serif;
  --texto: 'Castoro', Georgia, 'Times New Roman', serif;
  --dato: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --margen: clamp(16px, 4vw, 56px);
  --ancho: 1320px;
  --linea: 1.5px solid var(--tinta);
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--crema); color: var(--tinta); font: 400 1.0625rem/1.55 var(--texto); }
@media (min-width: 700px) { body { font-size: 1.125rem; } }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-weight: 400; margin: 0; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
::selection { background: var(--naranja); color: var(--tinta); }

.envoltura { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: var(--margen); top: -100px; z-index: 10; background: var(--tinta); color: var(--crema); padding: .6rem 1rem; font: 500 .85rem var(--dato); }
.saltar:focus { top: .5rem; }

.rotulo { font: 500 .8rem/1.35 var(--dato); letter-spacing: .09em; text-transform: uppercase; margin: 0 0 1rem; }
.titulo-seccion { font: 400 clamp(2.4rem, 5vw, 4rem)/.94 var(--titulo); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 1.2rem; }
.enlace-flecha { display: inline-block; font: 400 1.35rem/1.1 var(--titulo); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; border-bottom: 3px solid var(--naranja); padding-bottom: .12rem; }
.enlace-flecha::after { content: " →"; content: " →" / ""; }
.enlace-flecha:hover { border-bottom-color: currentColor; }
.pendiente { font: 500 .8em/1.4 var(--dato); color: var(--error); background: var(--papel); border: 1.5px dashed var(--error); padding: .05em .4em; }

/* Bandas de color a todo lo ancho */
.banda--naranja { background: var(--naranja); color: var(--tinta); }
.banda--crema { background: var(--crema); color: var(--tinta); }
.banda--crema-oscura { background: var(--crema-oscura); color: var(--tinta); }
.banda--verde { background: var(--verde); color: var(--crema); }
.banda--tierra { background: var(--tierra); color: var(--crema); }
.banda--naranja .enlace-flecha { border-bottom-color: var(--tinta); }

/* ---------- Cabecera ---------- */
.cabecera { border-bottom: var(--linea); background: var(--crema); }
.cabecera__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; min-height: 4.6rem; padding-block: .6rem; }
.marca { margin-right: auto; font: 400 2.2rem/1 var(--titulo); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.nav { display: flex; align-items: center; gap: 1.2rem 2rem; }
.nav__lista { display: flex; gap: .6rem 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav__lista a { font: 400 1.3rem/1 var(--titulo); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.nav__lista a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 3px; text-underline-offset: .32em; }
.nav__dato { font: 400 .82rem/1 var(--dato); letter-spacing: .03em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .15rem; }
.cabecera__menu { display: none; }

@media (max-width: 899px) {
  .js .cabecera__menu { display: inline-block; font: 400 1.35rem/1 var(--titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta); background: none; border: var(--linea); border-radius: 0; padding: .5rem .85rem .45rem; cursor: pointer; }
  .nav { flex-basis: 100%; flex-direction: column; align-items: flex-start; padding: .4rem 0 1.2rem; }
  .nav__lista { flex-direction: column; gap: 1rem; }
  .nav__lista a { font-size: 2rem; }
  .js .nav { display: none; }
  .js .menu-abierto .nav { display: flex; }
}

/* ---------- Portada ---------- */
.portada { display: grid; grid-template-columns: minmax(0, 1fr); }
.portada__texto { display: flex; flex-direction: column; padding: 2.4rem var(--margen) 2.2rem; }
.portada__titulo { font: 400 clamp(3.4rem, 13vw, 7.4rem)/.86 var(--titulo); text-transform: uppercase; letter-spacing: .005em; margin: 0 0 1.4rem; }
.portada__entrada { font-size: clamp(1.2rem, 1.7vw, 1.42rem); line-height: 1.45; max-width: 27em; margin-bottom: 1.6rem; }
.portada__foto { border-block: var(--linea); }
.portada__foto.foto--pendiente { align-items: flex-start; }
@media (min-width: 960px) {
  .portada { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: min(80vh, 820px); border-bottom: var(--linea); }
  .portada__texto { justify-content: center; gap: 1.8rem; padding: 3rem 3rem 6.5rem max(var(--margen), calc((100vw - var(--ancho)) / 2)); }
  .portada__texto .rotulo { margin: 0; }
  .portada__titulo { font-size: clamp(3.2rem, 5.6vw, 5.4rem); }
  .portada .portada__foto { aspect-ratio: auto; height: 100%; border-block: 0; border-left: var(--linea); }
  /* La foto rellena su columna sin marcar la altura: si no, su proporción 4:5 estira la portada más que la pantalla */
  .portada .portada__foto img { position: absolute; inset: 0; }
}

/* Ahora en campaña: en pantallas anchas se monta sobre el pie de la foto */
.campana { position: relative; z-index: 1; margin: 1.6rem var(--margen) 0; padding: 1.15rem 1.35rem 1.3rem; background: var(--crema); border: var(--linea); }
.campana__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem 1rem; margin-bottom: .8rem; }
.campana__cabeza .rotulo { margin: 0; }
.campana__enlace { font: 500 .8rem/1.3 var(--dato); letter-spacing: .06em; text-transform: uppercase; }
.campana .meses { border-block: var(--linea); margin-bottom: .9rem; }
.campana__texto { margin: 0; font-size: 1.12rem; line-height: 1.45; }
.campana__texto strong { font-weight: 400; font-style: italic; }
@media (min-width: 1100px) {
  .campana { width: min(44rem, 50vw); margin: -5.6rem 0 0 calc(41.667vw - 8rem); }
}

/* ---------- Meses y calendario ---------- */
.meses { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; font: 500 .8rem/2 var(--dato); text-align: center; }
.meses .es-actual { background: var(--tinta); color: var(--crema); }
.banda--verde .meses .es-actual, .banda--tierra .meses .es-actual { background: var(--crema); color: var(--tinta); }

.cal { font: 400 .84rem/1.3 var(--dato); }
.cal__cabecera, .cal__fila, .cal__grupo { display: grid; grid-template-columns: minmax(6.5rem, 8.5rem) minmax(0, 1fr); column-gap: .8rem; align-items: center; }
.cal__cabecera .meses { border-bottom: 1.5px solid currentColor; }
.cal__filas { list-style: none; margin: 0; padding: 0; }
.cal__fila { padding: .5rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent); }
.cal__nombre { font-weight: 500; }
.cal__nombre small { display: block; font-weight: 400; font-size: .8rem; margin-top: .12rem; }
.cal__grupo { padding: 1.7rem 0 .45rem; border-bottom: 1.5px solid currentColor; }
.cal__grupo:first-child { padding-top: 1rem; }
.cal__producto { font: 400 2rem/1 var(--titulo); text-transform: uppercase; letter-spacing: .03em; }
.cal__consulta { font-size: .84rem; }
.cal__pista {
  position: relative; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); height: 1.05rem;
  background-image: repeating-linear-gradient(to right, transparent 0 calc(100% / 12 - 1px), color-mix(in srgb, currentColor 30%, transparent) calc(100% / 12 - 1px) calc(100% / 12));
}
.cal__pista--grande { height: 1.7rem; }
.cal__pista--vacia { border: 1.5px dashed currentColor; }
.cal__tramo { position: relative; z-index: 1; grid-row: 1; background: var(--naranja); border: 1.5px solid var(--tinta); }
.banda--naranja .cal__tramo { background: var(--tinta); }
/* El mes en curso se sombrea en todas las pistas (el JS pone data-mes-actual en <html>) */
.cal__pista::after { content: ""; position: absolute; top: -.3rem; bottom: -.3rem; left: calc(var(--m, 0) * 100% / 12); width: calc(100% / 12); background: color-mix(in srgb, currentColor 14%, transparent); display: none; pointer-events: none; }
html[data-mes-actual] .cal__pista::after { display: block; }
html[data-mes-actual="2"] { --m: 1; } html[data-mes-actual="3"] { --m: 2; } html[data-mes-actual="4"] { --m: 3; }
html[data-mes-actual="5"] { --m: 4; } html[data-mes-actual="6"] { --m: 5; } html[data-mes-actual="7"] { --m: 6; }
html[data-mes-actual="8"] { --m: 7; } html[data-mes-actual="9"] { --m: 8; } html[data-mes-actual="10"] { --m: 9; }
html[data-mes-actual="11"] { --m: 10; } html[data-mes-actual="12"] { --m: 11; }
@media (min-width: 700px) {
  .cal__cabecera, .cal__fila, .cal__grupo { grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); column-gap: 1.2rem; }
}

/* Inicio y fin de cada tramo, en medios meses desde septiembre */
.d1{grid-column-start:1}.d2{grid-column-start:2}.d3{grid-column-start:3}.d4{grid-column-start:4}.d5{grid-column-start:5}.d6{grid-column-start:6}
.d7{grid-column-start:7}.d8{grid-column-start:8}.d9{grid-column-start:9}.d10{grid-column-start:10}.d11{grid-column-start:11}.d12{grid-column-start:12}
.d13{grid-column-start:13}.d14{grid-column-start:14}.d15{grid-column-start:15}.d16{grid-column-start:16}.d17{grid-column-start:17}.d18{grid-column-start:18}
.d19{grid-column-start:19}.d20{grid-column-start:20}.d21{grid-column-start:21}.d22{grid-column-start:22}.d23{grid-column-start:23}.d24{grid-column-start:24}
.h2{grid-column-end:2}.h3{grid-column-end:3}.h4{grid-column-end:4}.h5{grid-column-end:5}.h6{grid-column-end:6}.h7{grid-column-end:7}
.h8{grid-column-end:8}.h9{grid-column-end:9}.h10{grid-column-end:10}.h11{grid-column-end:11}.h12{grid-column-end:12}.h13{grid-column-end:13}
.h14{grid-column-end:14}.h15{grid-column-end:15}.h16{grid-column-end:16}.h17{grid-column-end:17}.h18{grid-column-end:18}.h19{grid-column-end:19}
.h20{grid-column-end:20}.h21{grid-column-end:21}.h22{grid-column-end:22}.h23{grid-column-end:23}.h24{grid-column-end:24}.h25{grid-column-end:25}

/* ---------- Inicio: presentación, índice de productos, certificados y teléfono ---------- */
.presentacion { display: grid; gap: 2.8rem; padding-block: clamp(4rem, 10vw, 8.5rem) clamp(3rem, 6vw, 5rem); }
.presentacion__texto p:not(.rotulo) { font-size: clamp(1.15rem, 1.6vw, 1.3rem); max-width: 30em; }
@media (min-width: 900px) {
  .presentacion { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 4rem; align-items: end; }
  .presentacion__texto { padding-left: 9%; }
  .cifras { grid-column: 2; grid-row: 1 / 3; align-self: end; }
  .presentacion .presentacion__foto { grid-column: 1; grid-row: 2; margin-left: 9%; }
}
.cifras { display: grid; gap: 1.8rem; }
.cifra { display: flex; flex-direction: column; margin: 0; }
.cifra__numero { font: 400 clamp(4.2rem, 9vw, 8.6rem)/.84 var(--titulo); letter-spacing: .01em; }
.cifra__texto { max-width: 17rem; margin-top: .45rem; padding-top: .5rem; border-top: 1.5px solid currentColor; font: 500 .8rem/1.4 var(--dato); letter-spacing: .08em; text-transform: uppercase; }
@media (min-width: 900px) { .cifras .cifra:last-child { margin-left: 22%; } }

.indice { border-top: var(--linea); }
.indice__lista { list-style: none; margin: 0; padding: 0; }
.indice__producto { border-bottom: var(--linea); }
.indice__fila { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1.3rem 1.1rem; align-items: center; padding-block: clamp(1.6rem, 4vw, 2.6rem); }
.indice .indice__foto { width: 100%; aspect-ratio: 1 / 1; border: var(--linea); }
.indice__calendario, .indice__consulta { grid-column: 1 / -1; }
.indice__producto:nth-child(2) .indice__fila { padding-block: clamp(2.2rem, 5vw, 3.6rem) clamp(1.4rem, 3vw, 2rem); }
.indice__producto:nth-child(4) .indice__fila { padding-block: clamp(1.4rem, 3vw, 2rem) clamp(2.2rem, 5vw, 3.4rem); }
.indice__nombre { font: 400 clamp(2.9rem, 7vw, 7rem)/.84 var(--titulo); text-transform: uppercase; letter-spacing: .005em; margin: 0 0 .55rem; }
.indice__nombre a { text-decoration: none; }
.indice__nombre a:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: .06em; }
.indice__temporada { font: 500 .82rem/1.35 var(--dato); letter-spacing: .07em; text-transform: uppercase; margin: 0 0 .35rem; }
.indice__variedades { max-width: 30em; margin: 0; font-size: 1rem; }
.indice__calendario .meses { margin-bottom: .35rem; }
@media (min-width: 900px) {
  .indice__fila { grid-template-columns: 150px minmax(0, 4fr) minmax(0, 5fr); column-gap: 2.5rem; align-items: end; }
  .indice__calendario, .indice__consulta { grid-column: auto; }
  .indice__consulta { align-self: center; }
}

.certificados { display: grid; gap: .8rem; padding-block: clamp(3.4rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem); }
.certificados__lista { display: flex; flex-wrap: wrap; gap: .3rem 0; list-style: none; margin: 0 0 .6rem; padding: 0; font: 400 clamp(1.9rem, 4.4vw, 3rem)/1 var(--titulo); letter-spacing: .04em; text-transform: uppercase; }
.certificados__lista li:not(:last-child)::after { content: "·"; content: "·" / ""; margin: 0 .55rem; color: var(--naranja-texto); }
.certificados p:not(.rotulo) { max-width: 36em; margin: 0; }
@media (min-width: 900px) {
  .certificados { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 3rem; }
  .certificados .rotulo { grid-row: 1 / 3; padding-top: .55rem; }
}

.llamada { padding-block: clamp(3rem, 8vw, 6rem) clamp(2.6rem, 6vw, 4.5rem); }
.llamada__rejilla { display: grid; gap: .8rem; }
.llamada__telefono { display: inline-block; justify-self: start; font: 400 clamp(3.6rem, 16vw, 11rem)/.84 var(--titulo); letter-spacing: .01em; text-decoration: none; }
.llamada__telefono:hover { text-decoration: underline; text-decoration-thickness: 5px; text-underline-offset: .05em; }
.llamada__datos { margin: 0; font-size: 1.1rem; }
@media (min-width: 900px) {
  .llamada__rejilla { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 3rem; align-items: end; }
  .llamada .rotulo { grid-column: 1 / -1; }
  .llamada__datos { padding-bottom: .8rem; }
}

/* ---------- Páginas interiores ---------- */
.cabecera-pagina { padding-block: clamp(2.6rem, 7vw, 6rem) clamp(2rem, 4vw, 3.4rem); }
.titulo-pagina { font: 400 clamp(3.2rem, 10vw, 7.2rem)/.86 var(--titulo); text-transform: uppercase; letter-spacing: .005em; max-width: 15ch; margin: 0 0 1.5rem; }
.entrada { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.42; max-width: 31em; margin: 0; }
@media (min-width: 900px) { .cabecera-pagina .entrada { margin-left: 22%; } }

/* Quiénes somos: filas con el rótulo en el margen, como un cuaderno */
.ensayo { padding-bottom: clamp(3rem, 7vw, 6rem); }
.ensayo__fila { display: grid; gap: .8rem; padding-block: 2.2rem 1.4rem; border-top: var(--linea); }
.ensayo__margen { font: 500 .8rem/1.4 var(--dato); letter-spacing: .09em; text-transform: uppercase; }
.ensayo__texto { max-width: 36em; font-size: 1.2rem; }
.ensayo__texto h3 { font: 400 1.7rem/1 var(--titulo); letter-spacing: .04em; text-transform: uppercase; margin: 1.7rem 0 .5rem; }
.ensayo__certificados { margin-top: 1.8rem; padding-top: .8rem; border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent); font: 400 .9rem/1.5 var(--dato); }
@media (min-width: 900px) {
  .ensayo__fila { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr); column-gap: 3rem; }
  .ensayo__margen { padding-top: .35rem; }
}
.cita { margin: clamp(2.6rem, 7vw, 5.5rem) 0 clamp(2.2rem, 5vw, 4rem); padding: 0; }
.cita p { max-width: 21ch; margin: 0; font: italic 400 clamp(1.9rem, 4.4vw, 3.5rem)/1.1 var(--texto); }
.ensayo .ensayo__foto { margin-bottom: 1rem; }
@media (min-width: 900px) {
  .cita { margin-left: 25%; }
  .ensayo .ensayo__foto { width: 66%; }
}

.instalaciones { padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3rem, 7vw, 5rem); }
.instalaciones__rejilla { display: grid; gap: 2rem; }
.instalaciones__texto { font-size: 1.2rem; max-width: 34em; }
@media (min-width: 960px) {
  .instalaciones__rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; row-gap: 3rem; }
  .instalaciones .titulo-seccion { grid-column: 1 / 9; }
  .instalaciones__cifra-1 { grid-column: 1 / 6; }
  .instalaciones__cifra-2 { grid-column: 7 / 12; margin-top: 3.5rem; }
  .instalaciones .instalaciones__foto-1 { grid-column: 1 / 9; grid-row: 3; }
  .instalaciones .instalaciones__foto-2 { grid-column: 9 / 13; grid-row: 3; align-self: start; margin-top: 7rem; }
  .instalaciones__texto { grid-column: 2 / 9; grid-row: 4; }
}

/* Productos: fichas a todo lo ancho */
.calendario-completo { padding-bottom: clamp(3.5rem, 8vw, 6.5rem); }
.ficha { padding-block: clamp(3.6rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem); }
.ficha + .ficha { border-top: var(--linea); }
.ficha__rejilla { display: grid; gap: 2rem; }
.ficha__nombre { font: 400 clamp(4rem, 10.5vw, 9.6rem)/.8 var(--titulo); text-transform: uppercase; letter-spacing: .005em; margin: 0 0 .9rem; }
.ficha__temporada { font: 500 .85rem/1.35 var(--dato); letter-spacing: .07em; text-transform: uppercase; margin: 0; }
.ficha__texto { font-size: 1.2rem; max-width: 33em; }
.ficha__texto p:last-child { margin-bottom: 0; }
.ficha__datos { display: grid; gap: 2.4rem; }
.ficha__hoja { display: grid; gap: 1.5rem; padding-top: 2.2rem; border-top: 1.5px solid currentColor; }
.ficha__hoja h3 { font: 400 clamp(2.3rem, 5vw, 3.6rem)/.9 var(--titulo); text-transform: uppercase; margin: 0 0 .9rem; }
.ficha__hoja p { max-width: 34em; }
@media (min-width: 960px) {
  .ficha__rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2.2rem; row-gap: 2.8rem; }
  .ficha__cabeza { grid-column: 1 / 7; grid-row: 1; }
  .ficha__rejilla > .foto { grid-column: 8 / 13; grid-row: 1 / 3; }
  .ficha__texto { grid-column: 1 / 7; grid-row: 2; align-self: end; }
  .ficha__datos { grid-column: 1 / 13; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: 3rem; align-items: start; }
  .ficha__hoja { grid-column: 3 / 13; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr); column-gap: 2.5rem; align-items: start; }
  .ficha--espejo .ficha__cabeza, .ficha--espejo .ficha__texto { grid-column: 7 / 13; }
  .ficha--espejo .ficha__rejilla > .foto { grid-column: 1 / 6; }
  .ficha--espejo .ficha__hoja { grid-column: 1 / 11; }
  .ficha--sandia .ficha__rejilla > .foto { grid-column: 7 / 13; grid-row: 1 / 3; align-self: end; }
  .ficha--sandia .ficha__cabeza, .ficha--sandia .ficha__texto { grid-column: 1 / 7; }
}
.ficha__variedades { font: 500 .85rem/1.5 var(--dato); }
.ficha__par { display: grid; gap: 3.5rem; }
.ficha__mitad .ficha__nombre { font-size: clamp(3.6rem, 11vw, 7rem); margin-top: 1.4rem; }
.ficha__mitad p { max-width: 30em; }
.ficha__mitad .ficha__temporada { margin-bottom: 1.2rem; }
.ficha__mitad .foto { max-width: 26rem; }
@media (min-width: 900px) {
  .ficha__par { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 4rem; align-items: start; }
  .ficha__mitad--estrecha { margin-top: 9rem; }
}

/* Tabla de formatos de envase */
.formatos { width: 100%; border-collapse: collapse; font: 400 .85rem/1.4 var(--dato); }
.formatos caption { text-align: left; margin-bottom: .55rem; }
.formatos th { font-weight: 500; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: .4rem .7rem .4rem 0; border-bottom: 1.5px solid currentColor; }
.formatos td { padding: .55rem .7rem .55rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); vertical-align: top; }

/* ---------- Fotos y huecos de foto ---------- */
.foto { position: relative; margin: 0; overflow: hidden; background: var(--crema-oscura); }
.foto picture { display: contents; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--4x5 { aspect-ratio: 4 / 5; }
.foto--3x2 { aspect-ratio: 3 / 2; }
.foto--1x1 { aspect-ratio: 1 / 1; }
.foto--pendiente {
  display: flex; align-items: flex-end; color: var(--tinta); border: var(--linea);
  background-color: var(--papel);
  background-image: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--kraft) 55%, transparent) 10px 11.5px);
}
.foto__nota { max-width: 32ch; margin: 1rem; padding: .7rem .85rem; background: var(--crema); border: var(--linea); font: 400 .8rem/1.5 var(--dato); }
.foto__nota strong { display: block; margin-bottom: .25rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--error); }

/* ---------- Contacto ---------- */
.contacto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.6rem; padding-block: clamp(2.6rem, 6vw, 5rem); }
.contacto__mapa { min-width: 0; }
.contacto__telefono { display: inline-block; margin: .4rem 0 1.4rem; font: 400 clamp(3.4rem, 13vw, 8rem)/.84 var(--titulo); letter-spacing: .01em; text-decoration: none; }
.contacto__telefono:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: .05em; }
.contacto__datos p { margin: 0 0 .9rem; }
.contacto__direccion { font-style: normal; margin: 0 0 1.6rem; }
.contacto__mapa { margin: 0; }
.contacto__mapa figcaption { margin-top: .6rem; font: 400 .8rem/1.45 var(--dato); }
.mapa-marco { overflow-x: auto; border: var(--linea); }
@media (max-width: 699px) { .mapa-marco .mapa { width: 660px; max-width: none; } }
@media (min-width: 960px) {
  .contacto { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 4rem; align-items: start; }
  .contacto__datos { padding-top: 1rem; }
  .contacto__telefono { font-size: clamp(3.4rem, 8.5vw, 8rem); }
}

/* Mapa (SVG en línea generado por scripts/mapa.py) */
.mapa { width: 100%; height: auto; background: var(--crema); }
.mapa__mar { fill: url(#mapa-trama); }
.mapa__agua { fill: color-mix(in srgb, var(--verde) 35%, transparent); stroke: var(--verde); stroke-width: .8; }
.mapa__casco { fill: #e3d6bf; }
.mapa__via { fill: none; stroke: var(--tinta); stroke-linecap: round; stroke-linejoin: round; }
.mapa__via--secundaria { stroke-width: .7; stroke-opacity: .55; }
.mapa__via--principal { stroke-width: 1.3; }
.mapa__via--autopista { stroke-width: 2.4; }
.mapa__tren { fill: none; stroke: var(--tinta); stroke-width: 1; stroke-dasharray: 5 4; }
.mapa__costa { fill: none; stroke: var(--tinta); stroke-width: 1.3; }
.mapa__nucleo { fill: var(--tinta); }
.mapa text { paint-order: stroke; stroke: var(--crema); stroke-width: 4px; stroke-linejoin: round; }
.mapa__pueblo { font: 400 17px var(--titulo); letter-spacing: .12em; fill: var(--tinta); }
.mapa__pueblo--grande { font-size: 27px; }
.mapa__agua-texto { font: italic 400 19px var(--texto); fill: var(--verde); }
.mapa__agua-texto--mar { font-size: 25px; letter-spacing: .05em; }
.mapa__agua-texto--s { font-size: 16px; }
.mapa__dato, .mapa__escala text, .mapa__norte text { font: 400 15px var(--dato); fill: var(--tinta); }
.mapa__escala path, .mapa__norte path { fill: none; stroke: var(--tinta); stroke-width: 1.5; }
.mapa__almacen circle { fill: var(--naranja); stroke: var(--tinta); stroke-width: 2; }
.mapa__almacen .mapa__almacen-centro { fill: var(--tinta); stroke: none; }
.mapa__guia { stroke: var(--tinta); stroke-width: 1.5; }
.mapa__etiqueta { fill: var(--crema); stroke: var(--tinta); stroke-width: 1.5; }
.mapa__almacen-nombre { font: 400 27px var(--titulo); letter-spacing: .1em; fill: var(--tinta); }
.mapa__borde { fill: none; stroke: none; }

/* Formulario */
.formulario-zona { padding-block: clamp(3.2rem, 7vw, 6rem); border-top: var(--linea); }
.formulario-rejilla { display: grid; gap: 2rem; }
.formulario-rejilla > div p { max-width: 26em; }
@media (min-width: 960px) { .formulario-rejilla { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 4rem; } }
.formulario { display: grid; gap: 1.3rem; max-width: 46rem; }
.campos { display: grid; gap: 1.2rem; }
@media (min-width: 700px) { .campos { grid-template-columns: 1fr 1fr; } .campo--ancho { grid-column: 1 / -1; } }
.campo label { display: block; margin-bottom: .4rem; font: 500 .8rem/1.3 var(--dato); letter-spacing: .08em; text-transform: uppercase; }
.campo input, .campo textarea { width: 100%; padding: .7rem .8rem; font: inherit; font-size: 1.05rem; color: var(--tinta); background: var(--papel); border: var(--linea); border-radius: 0; }
.campo textarea { min-height: 9rem; resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--naranja-texto); outline-offset: 1px; }
.campo--error input, .campo--error textarea { border: 2px solid var(--error); }
.campo__error { display: block; min-height: 1.1em; margin-top: .3rem; font: 500 .82rem/1.3 var(--dato); color: var(--error); }
.casilla { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: 1rem; cursor: pointer; }
.campo .casilla { margin: 0; font: 400 1rem/1.5 var(--texto); letter-spacing: 0; text-transform: none; }
.casilla input { width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; accent-color: var(--tinta); }
.rgpd { padding: 1rem 1.1rem; font-size: .92rem; background: var(--papel); border: var(--linea); }
.rgpd .rotulo { margin-bottom: .6rem; }
.rgpd dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 0; }
.rgpd dt { font: 500 .8rem/1.6 var(--dato); letter-spacing: .07em; text-transform: uppercase; }
.rgpd dd { margin: 0; }
.boton { justify-self: start; padding: .85rem 1.8rem .8rem; font: 400 1.5rem/1 var(--titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--crema); background: var(--tinta); border: var(--linea); border-radius: 0; cursor: pointer; }
.boton:hover { background: var(--naranja); color: var(--tinta); }
.formulario__nota { margin: 0; font: 400 .82rem/1.45 var(--dato); }
.aviso-ok { margin: 0; padding: .8rem 1rem; border: 2px solid var(--verde); }
.aviso-error { margin: 0; padding: .8rem 1rem; border: 2px solid var(--error); color: var(--error); }
.campo-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Textos legales */
.legal { padding-bottom: clamp(3rem, 7vw, 6rem); }
.legal__texto { max-width: 44rem; }
.legal__texto h2 { font: 400 1.9rem/1 var(--titulo); letter-spacing: .03em; text-transform: uppercase; margin: 2.3rem 0 .7rem; }
.legal__texto dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem 1.2rem; }
.legal__texto dt { font: 500 .8rem/1.7 var(--dato); letter-spacing: .06em; text-transform: uppercase; }
.legal__texto dd { margin: 0; }
.legal__texto ul { padding-left: 1.2rem; }
@media (min-width: 900px) { .legal__texto { margin-left: 22%; } }
@media (max-width: 559px) { .legal__texto dl, .rgpd dl { grid-template-columns: minmax(0, 1fr); } .legal__texto dd, .rgpd dd { margin-bottom: .5rem; } }

/* ---------- Pie ---------- */
.pie { padding-block: 3.4rem 1.4rem; background: var(--tinta); color: var(--crema); }
.pie__rejilla { display: grid; gap: 1.8rem; }
.pie__marca { margin: 0; font: 400 clamp(3.2rem, 9vw, 6rem)/.85 var(--titulo); letter-spacing: .07em; text-transform: uppercase; }
.pie__resumen { max-width: 26em; margin: 0; }
.pie address { font-style: normal; }
.pie__enlaces { list-style: none; margin: 0; padding: 0; font: 400 1.3rem/1.65 var(--titulo); letter-spacing: .06em; text-transform: uppercase; }
.pie__enlaces a { text-decoration: none; }
.pie__enlaces a:hover { text-decoration: underline; }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.4rem; margin-top: 2.6rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--crema) 35%, transparent); font: 400 .8rem/1.4 var(--dato); }
.pie__legal p { margin: 0; }
.pie__legal ul { display: flex; gap: 1.2rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) {
  .pie__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); column-gap: 3rem; align-items: start; }
  .pie__marca { grid-column: 1 / -1; }
}