/* Casa Ananta · colores «Piedra y teja», sacados de la propia casa (elegidos por Vanessa el 26/10/2026).
   Todos los colores están aquí arriba: si cambian, se cambian solo estas líneas y se pinta toda la web. */

/* La letra del logo, guardada en la propia web (fuentes/), sin pedir nada a Google. Licencia (SIL OFL, libre) en fuentes/licencia.txt */
@font-face {
  font-family: "IM Fell English";
  src: url("fuentes/im-fell-english.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IM Fell English";
  src: url("fuentes/im-fell-english-cursiva.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --teja: #a6533a;      /* el tejado */
  --arenisca: #d3b07a;  /* la piedra dorada */
  --cal: #f5efe4;       /* las paredes */
  --madera: #4e3424;    /* vigas y puertas */

  --fondo: var(--cal);
  --fondo-alt: #ebdfc8;  /* arenisca muy clara */
  --texto: #3b2a1f;
  --texto-suave: #7a6656;
  --linea: #dfd0b6;
  --accion: var(--teja);
  --accion-texto: #ffffff;

  --letra: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --letra-titulos: "IM Fell English", "Iowan Old Style", Palatino, Georgia, serif;
  --ancho: 1100px;
  --radio: 6px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--letra);
  font-size: 1.0625rem;
  line-height: 1.65;
}

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

a { color: inherit; }

h1, h2, .marca, .destacado, .firma, .pie-nombre {
  font-family: var(--letra-titulos);
  font-weight: normal;
}

.contenedor {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 1.25rem;
}

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

.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
}

.cabecera .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4rem;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.55rem;
  color: var(--madera);
  text-decoration: none;
}

.marca img { width: 3.2rem; height: auto; }

/* En el móvil, logo y nombre algo más pequeños para que quepan con el menú */
@media (max-width: 480px) {
  .marca { font-size: 1.25rem; gap: 0.45rem; }
  .marca img { width: 2.5rem; }
  .menu { gap: 0.9rem; }
}

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

.boton {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radio);
  background: var(--accion);
  color: var(--accion-texto);
  text-decoration: none;
  font-weight: 600;
}

.boton:hover { opacity: 0.88; }

.boton--pequeno { padding: 0.5rem 1rem; font-size: 0.95rem; }

.boton--claro {
  background: transparent;
  color: var(--accion);
  border: 2px solid var(--accion);
}

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

.portada { padding: 2rem 0 3rem; }

.portada-reparto {
  display: grid;
  gap: 2rem;
}

.portada h1 {
  font-size: clamp(2.6rem, 9vw, 4.5rem);
  line-height: 1.05;
  margin: 0 0 1rem;
}

.entradilla {
  font-size: 1.3rem;
  color: var(--texto-suave);
  margin: 0 0 1.75rem;
  max-width: 32rem;
}

.portada-foto {
  border-radius: var(--radio);
  width: 100%;
  max-height: 80vh;
  object-fit: cover;
}

/* ---------- Bandas ---------- */

.banda { padding: 4rem 0; }

.banda--alt { background: var(--fondo-alt); }

.etiqueta {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teja);
  margin: 0 0 1rem;
}

/* La roseta de seis pétalos del pilar de la casa, como adorno */
.etiqueta { display: flex; align-items: center; gap: 0.55rem; }
.etiqueta::before {
  content: "";
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  background: url("img/roseta.svg") center / contain no-repeat;
}

.cierre h2::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  background: url("img/roseta.svg") center / contain no-repeat;
}

.texto-largo { max-width: 40rem; }

.destacado {
  font-size: 1.6rem;
  line-height: 1.3;
  margin: 0 0 1.25rem;
}

.firma {
  font-size: 1.4rem;
  font-style: italic;
  margin-top: 2rem;
}

.reparto {
  display: grid;
  gap: 2.5rem;
}

.fotos-lado {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.fotos-lado img, .galeria img { border-radius: var(--radio); }

/* ---------- Galerías ---------- */

.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 2rem 0;
}

.galeria img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* En el móvil, la tercera foto ocupa toda la fila para que no se quede sola */
.galeria--tres img:last-child {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 3;
}

/* ---------- Cierre ---------- */

.cierre { text-align: center; }

.cierre h2 {
  font-size: clamp(2rem, 6vw, 2.8rem);
  margin: 0 0 1rem;
}

.cierre .entradilla { margin-left: auto; margin-right: auto; }

/* ---------- Formulario ---------- */

.formulario {
  max-width: 34rem;
  margin: 0 auto;
  text-align: left;
}

.campo { margin-bottom: 1.1rem; }

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

.opcional { font-weight: normal; color: var(--texto-suave); }

.campo input,
.campo textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  font: inherit;
  color: var(--texto);
  background: #fffdf8;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.campo input:focus,
.campo textarea:focus {
  outline: 2px solid var(--accion);
  outline-offset: 1px;
}

.campo textarea { resize: vertical; }

.campo--casilla {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}

.campo--casilla input {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin-top: 0.2rem;
}

.campo--casilla label {
  font-weight: normal;
  font-size: 0.95rem;
  margin: 0;
}

.formulario .boton {
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}

.formulario-aviso {
  padding: 0.75rem 1rem;
  border-radius: var(--radio);
  background: var(--fondo);
  border: 1px solid var(--linea);
}

.formulario-aviso--falta { border-color: var(--accion); }
.formulario-aviso--bien { border-color: var(--accion); font-weight: 600; }

/* Campo trampa para robots: fuera de la vista, no del HTML */
.campo--oculto {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario-alternativa {
  margin-top: 1.75rem;
  font-size: 0.95rem;
  color: var(--texto-suave);
}

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

.pie {
  background: var(--madera);
  padding: 2.5rem 0;
  font-size: 0.95rem;
  color: #e3d4bb;
}

.pie p { margin: 0.25rem 0; }

.pie-nombre { font-size: 1.3rem; color: var(--cal); display: flex; align-items: center; gap: 0.6rem; }

.pie-nombre::before {
  content: "";
  width: 1.6rem;
  height: 1.6rem;
  background: url("img/roseta-clara.svg") center / contain no-repeat;
}

/* ---------- Páginas sencillas (blog, legal, 404) ---------- */

.pagina { padding: 3rem 0 4rem; min-height: 50vh; }

.pagina h1 { font-size: clamp(2rem, 6vw, 2.8rem); margin: 0 0 1rem; }

/* ---------- Pantallas anchas ---------- */

@media (min-width: 800px) {
  .portada { padding: 3rem 0 4rem; }
  .portada-reparto {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
  }
  .reparto { grid-template-columns: 3fr 2fr; gap: 4rem; }
  .galeria { grid-template-columns: repeat(4, 1fr); }
  .galeria--tres { grid-template-columns: repeat(3, 1fr); }
  .galeria--tres img:last-child { grid-column: auto; aspect-ratio: 3 / 4; }
}

/* ---------- Página legal ---------- */

.pagina h2 { font-size: 1.5rem; line-height: 1.25; margin: 2.5rem 0 0.75rem; }

.pagina h3 { font-size: 1.05rem; margin: 1.5rem 0 0.4rem; }

.fecha-legal { color: var(--texto-suave); font-size: 0.95rem; }

/* Huecos del borrador: datos que faltan. No puede quedar ninguno al publicar. */
.hueco { background: #fff1a8; padding: 0 0.2em; }

/* ---------- Menú de la cabecera ---------- */

.menu {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.menu a:not(.boton) {
  text-decoration: none;
  font-weight: 600;
}

.menu a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* ---------- Blog: la lista ---------- */

.tarjetas {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.tarjeta {
  display: block;
  text-decoration: none;
  background: var(--fondo-alt);
  border-radius: var(--radio);
  overflow: hidden;
}

.tarjeta img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.tarjeta-texto { padding: 1.1rem 1.25rem 1.4rem; }

.tarjeta h2 {
  font-family: var(--letra-titulos);
  font-weight: normal;
  font-size: 1.45rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

.tarjeta p { margin: 0; color: var(--texto-suave); }

.tarjeta:hover h2 { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- Blog: un artículo ---------- */

.articulo { max-width: 42rem; }

.articulo h1 { margin-bottom: 1.25rem; }

.articulo .entradilla { color: var(--texto); font-size: 1.25rem; }

.articulo h2 {
  font-family: var(--letra-titulos);
  font-weight: normal;
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 2.5rem 0 0.75rem;
}

.articulo figure { margin: 2rem 0; }

.articulo figure img { border-radius: var(--radio); width: 100%; }

.articulo figcaption {
  font-size: 0.9rem;
  color: var(--texto-suave);
  margin-top: 0.5rem;
}

.fotos-pareja {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.fotos-pareja img { aspect-ratio: 3 / 4; object-fit: cover; }

.volver { margin-top: 3rem; }

@media (min-width: 800px) {
  .tarjetas { grid-template-columns: repeat(2, 1fr); }
}