@charset "UTF-8";

/* -------------------------------------------------------------------------
   Tipografías servidas desde este mismo servidor.
   No se usa el CDN de Google a propósito: enviaría la IP de cada visitante
   a Google, y el aviso de privacidad de esta web dice que eso no ocurre.
   Ambas bajo SIL Open Font License 1.1 (ver assets/tipos/LICENCIAS.txt).
   ------------------------------------------------------------------------- */

@font-face {
  font-family: Fraunces;
  src: url("tipos/fraunces-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: Karla;
  src: url("tipos/karla-400.woff2") format("woff2");
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: Karla;
  src: url("tipos/karla-700.woff2") format("woff2");
  font-weight: 700; font-display: swap; font-style: normal;
}

/* =========================================================================
   Acequias — hoja de estilos única
   El pueblo se llama como el canal que lo riega: una línea de agua recorre
   la página y marca dónde empieza cada tramo.
   ========================================================================= */

:root {
  --cal:        #f3f5f1;  /* pared encalada */
  --cal-hondo:  #e5e9e3;  /* sombra sobre la cal */
  --papel:      #fbfcfa;  /* fondo de tarjeta */
  --agua:       #14545c;  /* agua honda de la acequia */
  --agua-hondo: #0c3b42;
  --agua-viva:  #2c8a88;  /* agua al sol */
  --hoja:       #55703f;  /* almendro y olivo */
  --tejar:      #9e4a2f;  /* barro cocido del tejar */
  --pizarra:    #1c2422;  /* texto */
  --junco:      #5f6f68;  /* texto secundario */

  --medida: 64ch;
  --sombra: 0 1px 2px rgba(20,84,92,.05), 0 8px 24px -12px rgba(20,84,92,.18);

  --p1: .5rem;
  --p2: 1rem;
  --p3: 1.75rem;
  --p4: 3rem;
  --p5: 5.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .aparece { opacity: 1 !important; transform: none !important; }
}

body {
  margin: 0;
  background: var(--cal);
  color: var(--pizarra);
  font-family: Karla, "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

/* ------------------------------------------------------------- tipografía */

h1, h2, h3 {
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 var(--p2);
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 9vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 5.5vw, 2.5rem); }
h3 { font-size: 1.25rem; font-weight: 600; margin-top: var(--p3); }

p, ul, ol, dl, blockquote { max-width: var(--medida); }
p { margin: 0 0 var(--p2); }

a { color: var(--agua); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--tejar); }

:focus-visible { outline: 3px solid var(--agua-viva); outline-offset: 3px; border-radius: 3px; }

.saltar { position: absolute; left: -9999px; background: var(--agua); color: #fff; padding: var(--p2); z-index: 99; }
.saltar:focus { left: var(--p2); top: var(--p2); }

/* ---------------------------------------------------------------- envases */

.envase { width: min(100% - 2.5rem, 64rem); margin-inline: auto; }
.envase--fino { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }

/* -------------------------------------------------------------- cabecera */

.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: rgba(243,245,241,.88);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--cal-hondo);
}

.cabecera-fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--p2) var(--p3); padding-block: .85rem; }

.marca {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.4rem; font-weight: 600;
  font-variation-settings: "SOFT" 20, "WONK" 1;
  color: var(--pizarra); text-decoration: none; line-height: 1;
}
.marca span {
  display: block; font-family: Karla, sans-serif; font-size: .7rem; font-weight: 400;
  color: var(--junco); letter-spacing: .06em; text-transform: uppercase; margin-top: .32rem;
}

.menu { margin-left: auto; }
.menu ul { display: flex; flex-wrap: wrap; gap: var(--p2) var(--p3); list-style: none; margin: 0; padding: 0; max-width: none; }
.menu a {
  text-decoration: none; color: var(--junco); font-size: .95rem;
  padding-bottom: 3px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.menu a:hover { color: var(--agua); }
.menu a[aria-current="page"] { color: var(--pizarra); border-bottom-color: var(--agua-viva); }

/* ----------------------------------------------------------------- hero */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--agua-hondo); color: var(--cal);
  display: grid; align-items: end;
  min-height: min(78svh, 44rem);
  padding-block: clamp(var(--p4), 12vw, 8rem) clamp(var(--p3), 7vw, 4.5rem);
}

/* La ilustración o la fotografía ocupan todo el fondo */
.hero .valle, .hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(9,44,49,.94) 8%, rgba(9,44,49,.62) 48%, rgba(9,44,49,.28) 100%);
}

.hero h1 { color: var(--cal); margin-bottom: var(--p2); }
.hero-lema { max-width: 38ch; font-size: clamp(1.05rem, 2.6vw, 1.25rem); color: #d3e3e0; margin: 0; }

.etimologia {
  font-family: Fraunces, Georgia, serif; font-size: 1rem;
  color: #8fbcb6; margin: 0 0 var(--p1);
  font-variation-settings: "WONK" 1; letter-spacing: .01em;
}
.etimologia b { font-weight: 500; color: #cfe0dd; }

/* Cinta de datos bajo el hero */
.cinta { background: var(--agua); color: #d3e3e0; }
.cinta dl {
  max-width: none; margin: 0; padding-block: var(--p3);
  display: grid; gap: var(--p3) var(--p2);
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}
.cinta dt { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; opacity: .72; margin-bottom: .25rem; }
.cinta dd {
  margin: 0; color: var(--cal);
  font-family: Fraunces, Georgia, serif; font-size: 1.5rem; line-height: 1.1;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}

/* --------------------------------------------------- el canal (firma) */

.canal { padding-block: var(--p5); }

.canal-tramo { position: relative; padding-left: var(--p3); }
.canal-tramo::before {
  content: ""; position: absolute; left: 0; top: .3em; bottom: 0;
  width: 2px; background: linear-gradient(to bottom, var(--agua-viva), rgba(44,138,136,.12));
}
/* el partidor: la piedra que reparte el agua al entrar en cada tramo */
.canal-tramo::after {
  content: ""; position: absolute; left: -4px; top: .9em;
  width: 10px; height: 10px; background: var(--agua); transform: rotate(45deg);
}
.canal-tramo + .canal-tramo { margin-top: var(--p5); }
.canal-tramo > h2 { margin-top: 0; }

@media (min-width: 46rem) { .canal-tramo { padding-left: var(--p4); } }

/* Rótulo de sección */
.rotulo {
  display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--agua-viva); font-weight: 700; margin-bottom: .55rem;
}

/* Primer párrafo destacado tras un h2 */
.entradilla { font-size: 1.15rem; color: #33403c; max-width: 54ch; }

/* -------------------------------------------------------------- fotos */

.foto { margin: var(--p3) 0; }
.foto img, .foto-hueco {
  display: block; width: 100%; border-radius: 4px; background: var(--cal-hondo);
}
.foto--ancha  img, .foto--ancha  .foto-hueco { aspect-ratio: 16/9; object-fit: cover; }
.foto--alta   img, .foto--alta   .foto-hueco { aspect-ratio: 3/4;  object-fit: cover; }
.foto--cuadro img, .foto--cuadro .foto-hueco { aspect-ratio: 1;    object-fit: cover; }

.foto figcaption { font-size: .85rem; color: var(--junco); margin-top: .6rem; max-width: 46ch; }

/* Hueco reservado: se ve intencionado, no roto */
.foto-hueco {
  display: grid; place-items: center; padding: var(--p3); text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(44,138,136,.05) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, #dfe7e2, #eef2ec);
  border: 1px solid var(--cal-hondo);
}
.foto-hueco-txt { font-size: .85rem; color: var(--junco); max-width: 26ch; line-height: 1.5; }
.foto-hueco-txt::before { content: "◈"; display: block; font-size: 1.3rem; color: var(--agua-viva); opacity: .5; margin-bottom: .4rem; }

/* -------------------------------------------------------------- tarjetas */

.rejilla {
  display: grid; gap: var(--p3);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-top: var(--p3); padding: 0; list-style: none; max-width: none;
}

.tarjeta {
  background: var(--papel); border: 1px solid var(--cal-hondo); border-radius: 5px;
  padding: var(--p3); box-shadow: var(--sombra);
  transition: transform .18s ease, box-shadow .18s ease;
}
.tarjeta:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,84,92,.06), 0 16px 32px -14px rgba(20,84,92,.28); }
.tarjeta h3 { margin-top: 0; }
.tarjeta p:last-child { margin-bottom: 0; }
.tarjeta .foto { margin: calc(var(--p3) * -1) calc(var(--p3) * -1) var(--p3); }
.tarjeta .foto img, .tarjeta .foto .foto-hueco { border-radius: 4px 4px 0 0; border-inline: 0; border-top: 0; }

.numero {
  font-family: Fraunces, Georgia, serif; font-size: .85rem; color: var(--agua-viva);
  display: block; margin-bottom: .3rem; letter-spacing: .05em;
}

/* ---------------------------------------------------------------- datos */

.ficha { border-top: 1px solid var(--cal-hondo); padding-top: var(--p3); margin-top: var(--p3); }
.ficha h3 { margin-top: 0; }
.ficha .apunte, .apunte { color: var(--junco); font-size: .92rem; }

.cita {
  margin: var(--p4) 0; padding: var(--p3) 0 var(--p3) var(--p3);
  border-left: 3px solid var(--hoja);
  font-family: Fraunces, Georgia, serif; font-size: clamp(1.1rem, 3vw, 1.4rem);
  line-height: 1.4; font-variation-settings: "SOFT" 50, "WONK" 1; color: #2b3835;
  max-width: 44ch;
}
.cita cite { display: block; margin-top: var(--p2); font-family: Karla, sans-serif;
  font-size: .82rem; font-style: normal; color: var(--junco); line-height: 1.5; }

/* --------------------------------------------------------- experiencias */

.experiencia { border-top: 1px solid var(--cal-hondo); padding-block: var(--p3); }
.experiencia:first-of-type { border-top: 0; padding-top: 0; }
.experiencia h3 { margin: 0 0 .45rem; }
.experiencia .firma {
  font-size: .87rem; color: var(--junco);
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem;
  margin-bottom: var(--p2); max-width: none;
}
.experiencia p { white-space: pre-line; }

.sello {
  font-size: .7rem; padding: .18rem .6rem; border: 1px solid var(--hoja);
  color: var(--hoja); border-radius: 999px; line-height: 1.6;
  letter-spacing: .03em; white-space: nowrap;
}
.sello--vecino { border-color: var(--tejar); color: var(--tejar); }
.estrellas { color: var(--tejar); letter-spacing: .12em; font-size: .92rem; }

/* ------------------------------------------------------------ formularios */

.formulario { max-width: 34rem; margin-top: var(--p3); }
.campo { margin-bottom: var(--p3); }
.campo label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .4rem; }
.campo .pista { display: block; font-weight: 400; color: var(--junco); font-size: .86rem; margin-top: .25rem; }

input[type=text], input[type=email], input[type=password], input[type=month], textarea, select {
  width: 100%; font: inherit; padding: .75rem .85rem;
  border: 1px solid #c2ccc6; background: #fff; border-radius: 4px; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 11rem; resize: vertical; line-height: 1.6; }
input:focus, textarea:focus, select:focus {
  border-color: var(--agua-viva); box-shadow: 0 0 0 3px rgba(44,138,136,.14);
}

.consentimiento { display: flex; gap: .7rem; align-items: flex-start; font-size: .93rem; }
.consentimiento input { margin-top: .35rem; flex: 0 0 auto; }
.consentimiento label { font-weight: 400; }

.boton {
  display: inline-block; font: inherit; font-weight: 700;
  padding: .75rem 1.6rem; background: var(--agua); color: var(--cal);
  border: 2px solid var(--agua); border-radius: 4px; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, transform .12s;
}
.boton:hover { background: var(--agua-hondo); border-color: var(--agua-hondo); color: var(--cal); transform: translateY(-1px); }
.boton--sobrio { background: transparent; color: var(--agua); }
.boton--sobrio:hover { background: var(--agua); color: var(--cal); }
.boton--riesgo { background: var(--tejar); border-color: var(--tejar); }
.boton--riesgo:hover { background: #82361f; border-color: #82361f; }
.boton--claro { background: transparent; border-color: rgba(255,255,255,.5); color: var(--cal); }
.boton--claro:hover { background: var(--cal); border-color: var(--cal); color: var(--agua-hondo); }

/* la trampa para robots: invisible para personas, sin display:none */
.cepo { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------- avisos */

.aviso {
  padding: var(--p2) var(--p3); border-left: 4px solid var(--agua-viva);
  background: var(--papel); border-radius: 0 4px 4px 0; box-shadow: var(--sombra);
  margin-bottom: var(--p3); max-width: var(--medida);
}
.aviso--error { border-left-color: var(--tejar); }
.aviso--bien  { border-left-color: var(--hoja); }
.aviso p:last-child { margin-bottom: 0; }
.aviso ul { margin: var(--p1) 0 0; padding-left: 1.2rem; }

/* ---------------------------------------------------------------- tabla */

.tabla { width: 100%; border-collapse: collapse; margin-top: var(--p3); font-size: .95rem; }
.tabla th, .tabla td { text-align: left; padding: .7rem .55rem; border-bottom: 1px solid var(--cal-hondo); vertical-align: top; }
.tabla th { font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; color: var(--junco); font-weight: 700; }
.tabla tbody tr:hover { background: var(--papel); }
.envoltorio-tabla { overflow-x: auto; }

/* --------------------------------------------------------- llamada final */

.llamada {
  background: var(--agua); color: var(--cal); border-radius: 6px;
  padding: clamp(var(--p3), 6vw, var(--p4)); margin-top: var(--p5);
}
.llamada h2 { color: var(--cal); margin-top: 0; }
.llamada p { color: #d3e3e0; max-width: 46ch; }

/* ------------------------------------------------------------------ pie */

.pie { margin-top: var(--p5); border-top: 1px solid var(--cal-hondo); padding-block: var(--p4); font-size: .92rem; color: var(--junco); }
.pie-rejilla { display: grid; gap: var(--p3); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.pie h2 { font-family: Karla, sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pizarra); margin: 0 0 var(--p2); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .4rem; }
.pie a { color: var(--junco); }
.pie a:hover { color: var(--agua); }
.pie-nota { margin-top: var(--p4); padding-top: var(--p3); border-top: 1px solid var(--cal-hondo);
  font-size: .85rem; max-width: var(--medida); }

/* -------------------------------------------------- aparición al desplazar */

.aparece { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.aparece.visible { opacity: 1; transform: none; }

/* -------------------------------------------------------------- utilidad */

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vacio { color: var(--junco); font-style: italic; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--p2); margin-top: var(--p3); }

/* ------------------------------------------------------- pestañas del panel */

.pestanas {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: var(--p3) 0 var(--p4);
  border-bottom: 1px solid var(--cal-hondo); padding-bottom: .75rem;
}
.pestanas a {
  text-decoration: none; font-size: .92rem; font-weight: 700; color: var(--junco);
  padding: .4rem .9rem; border: 1px solid var(--cal-hondo); border-radius: 999px;
  background: var(--papel); transition: color .15s, border-color .15s, background .15s;
}
.pestanas a:hover { color: var(--agua); border-color: var(--agua-viva); }
.pestanas a.activa { background: var(--agua); border-color: var(--agua); color: var(--cal); }

/* Fichero de subida dentro de las tarjetas del panel */
input[type=file] {
  width: 100%; font: inherit; font-size: .88rem;
  padding: .55rem; border: 1px dashed #b7c3bc; border-radius: 4px; background: #fff;
}
input[type=file]::file-selector-button {
  font: inherit; font-size: .85rem; font-weight: 700; margin-right: .7rem;
  padding: .35rem .8rem; border: 0; border-radius: 3px;
  background: var(--cal-hondo); color: var(--pizarra); cursor: pointer;
}
code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .85em; background: var(--cal-hondo); padding: .1rem .35rem; border-radius: 3px;
}

/* ------------------------------------------------------ previsión semanal */

.tiempo-ahora { font-size: 1.1rem; color: #33403c; margin-bottom: var(--p3); }
.tiempo-ahora b { font-family: Fraunces, Georgia, serif; font-size: 1.35rem; }

.semana {
  list-style: none; margin: var(--p3) 0 var(--p2); padding: 0; max-width: none;
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
}

.dia {
  background: var(--papel); border: 1px solid var(--cal-hondo); border-radius: 5px;
  padding: var(--p2) .6rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  box-shadow: var(--sombra);
}
.dia--hoy { border-color: var(--agua-viva); background: #fff; }

.dia-nombre { font-weight: 700; font-size: .88rem; }
.dia--hoy .dia-nombre { color: var(--agua); }
.dia-fecha { font-size: .72rem; color: var(--junco); }

.icono-tiempo { width: 44px; height: 46px; margin: .3rem 0 .1rem; }

.dia-cielo { font-size: .72rem; color: var(--junco); line-height: 1.35; min-height: 2.1em; }

.dia-temp { font-family: Fraunces, Georgia, serif; font-size: 1.25rem; line-height: 1.2;
  font-variation-settings: "SOFT" 20, "WONK" 1; margin-top: .2rem; }
.dia-min { color: var(--junco); font-size: .95rem; margin-left: .15rem; }

.dia-lluvia { font-size: .72rem; color: var(--agua-viva); font-weight: 700; margin-top: .15rem; }

.tiempo-fuente { margin-top: var(--p2); font-size: .82rem; }

/* ------------------------------------------- tira de datos sobre fondo claro */

.datos {
  list-style: none; max-width: none;
  margin: var(--p3) 0 0; padding-top: var(--p3);
  border-top: 1px solid var(--cal-hondo);
  display: grid; gap: var(--p3) var(--p2);
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
.datos div { min-width: 0; }
.datos dt { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--junco); margin-bottom: .2rem; }
.datos dd {
  margin: 0; font-family: Fraunces, Georgia, serif; font-size: 1.4rem; line-height: 1.15;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}