:root {
  --stone: #8a7f6b;
  --stone-dark: #4a4238;
  --terracotta: #c1622d;
  --terracotta-dark: #9c4a1f;
  --cream: #f7f1e6;
  --paper: #fffaf0;
  --ink: #362d24;
  --green: #5c7048;
  --star: #e0a530;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Georgia, 'Iowan Old Style', serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
}

header.site {
  background: var(--stone-dark);
  color: var(--cream);
  padding: 0.6rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 3px solid var(--terracotta);
}

header.site .brand {
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  font-weight: bold;
  color: var(--cream);
  text-decoration: none;
}

header.site .brand span {
  color: var(--star);
}

nav.site {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
}

nav.site a {
  color: var(--cream);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 0.3rem 0.1rem;
  border-bottom: 2px solid transparent;
}

nav.site a:hover, nav.site a.active {
  border-bottom: 2px solid var(--star);
}

/* Selector de idioma — siempre visible arriba a la derecha de la cabecera, en las
   9 páginas, en español y en inglés. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.lang-switch a {
  color: var(--cream);
  text-decoration: none;
  opacity: 0.6;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
}
.lang-switch a.current {
  opacity: 1;
  font-weight: bold;
  background: rgba(255,255,255,0.12);
}
.lang-switch a:hover { opacity: 1; }
.lang-switch .sep { opacity: 0.4; }

.hero {
  position: relative;
  height: 60vh;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  color: white;
  overflow: hidden;
}

/* Hero de portada (con el cielo de estrellas) — necesita algo más de alto que el
   resto para que quepan las 6 estrellas repartidas, pero en móvil se reduce para
   no ocupar toda la pantalla de un tirón. Sustituye al min-height puesto antes
   como estilo en línea en index.html / en/index.html. */
.hero.hero-home { min-height: 560px; }

.hero .overlay {
  background: linear-gradient(180deg, rgba(54,45,36,0.05) 0%, rgba(54,45,36,0.75) 100%);
  width: 100%;
  padding: 2.5rem 1.5rem 2rem;
  /* El texto siempre por encima de las estrellas: las estrellas (.starlinks) tienen
     z-index propio para poder pincharlas, así que sin esto el texto queda debajo
     de su brillo/sombra en cuanto ambos ocupan la misma zona (sobre todo en móvil,
     donde el título ocupa más líneas). pointer-events:none para que, donde no hay
     texto, el toque/clic siga llegando a la estrella que está debajo. */
  position: relative;
  z-index: 4;
  pointer-events: none;
}
.hero .overlay a { pointer-events: auto; }

.hero h1 {
  font-size: 2.4rem;
  margin: 0 0 0.4rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.hero p.tagline {
  font-size: 1.15rem;
  max-width: 640px;
  font-style: italic;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

main {
  max-width: 880px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

section.block {
  margin-bottom: 3rem;
}

section.block h2 {
  color: var(--terracotta-dark);
  font-size: 1.5rem;
  border-bottom: 2px solid var(--terracotta);
  padding-bottom: 0.3rem;
  margin-bottom: 1rem;
}

.pillar {
  background: var(--paper);
  border-left: 4px solid var(--terracotta);
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  border-radius: 0 6px 6px 0;
}

.pillar h3 {
  margin: 0 0 0.4rem;
  color: var(--stone-dark);
}

.pillar blockquote {
  margin: 0.5rem 0 0;
  font-style: italic;
  color: #5a4f40;
  border-left: 2px solid var(--star);
  padding-left: 0.8rem;
}

figure {
  margin: 0 0 1.8rem;
}

figure img {
  width: 100%;
  border-radius: 8px;
  display: block;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

figcaption {
  font-size: 0.85rem;
  color: #7a6d5c;
  margin-top: 0.4rem;
  font-style: italic;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.review-card {
  background: var(--paper);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-bottom: 1rem;
}

.review-card .stars { color: var(--star); letter-spacing: 2px; }
.review-card .author { font-weight: bold; margin-top: 0.4rem; display: block; font-size: 0.9rem; color: var(--stone-dark); }

.badge-note {
  background: #f0e6d2;
  border: 1px dashed var(--terracotta);
  padding: 0.8rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #5a4f40;
}

.star-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  align-items: center;
  margin-top: 0.5rem;
}

.star-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--cream);
  text-decoration: none;
  font-size: 0.85rem;
}

.star-link svg { width: 22px; height: 22px; }
.star-link:hover svg { fill: var(--terracotta); }
.star-link svg { fill: var(--star); transition: fill .15s; }

/* Botón de donativo — abre el panel con las distintas formas de colaborar
   (PayPal, Bizum, transferencia). Se usa tanto suelto dentro de una página
   como en el botón flotante de abajo — los dos abren el mismo panel. */
.donate-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--terracotta);
  color: white;
  text-decoration: none;
  font-weight: bold;
  padding: 0.75rem 1.4rem;
  border-radius: 50px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
  border: none;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.donate-btn:hover { background: var(--terracotta-dark); transform: translateY(-1px); }

footer.site {
  background: var(--stone-dark);
  color: var(--cream);
  /* El padding de abajo es más grande de lo normal a propósito: los botones
     flotantes de WhatsApp y donativo son "fixed" y quedan siempre encima de
     lo que haya al final de la página — sin este hueco, tapaban la dirección
     al llegar abajo del todo. */
  padding: 2rem 1.5rem 7rem;
}

footer.site h4 {
  margin: 0 0 0.6rem;
  color: var(--cream);
  font-weight: normal;
  font-size: 0.95rem;
  opacity: 0.85;
}

footer.site .addr {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 1.4rem;
}

/* Línea de aviso legal + crédito de diseño, inyectada por script.js debajo
   de la dirección, en el pie de todas las páginas. */
footer.site .footer-legal {
  font-size: 0.72rem;
  opacity: 0.55;
  margin-top: 0.9rem;
}
footer.site .footer-legal a { color: var(--cream); }

@media (max-width: 480px) {
  /* En móvil los botones flotantes son más pequeños (iconos redondos), así
     que hace falta bastante menos hueco extra abajo. */
  footer.site { padding-bottom: 5rem; }
}

.embed-wrap iframe {
  width: 100%;
  border: none;
  border-radius: 8px;
}

a.linkout {
  color: var(--terracotta-dark);
  font-weight: bold;
}

.protoflag {
  background: var(--terracotta);
  color: white;
  text-align: center;
  font-size: 0.78rem;
  padding: 0.35rem;
  letter-spacing: 0.03em;
}

/* Panel "para Marta": lo que necesitamos de ella para que la web quede terminada y se
   pueda ir actualizando sola. Visible dentro del propio prototipo, no solo en el chat. */
.marta-todo {
  background: var(--paper);
  border: 2px solid var(--terracotta);
  border-radius: 10px;
  padding: 1.4rem 1.6rem;
}
.marta-todo h2 { margin-top: 0; }
.marta-todo ul {
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
}
.marta-todo li {
  margin-bottom: 0.9rem;
}
.marta-todo li:last-child { margin-bottom: 0; }
.marta-todo strong { color: var(--terracotta-dark); }

/* Recuadro de "aquí aparecerá esto" cuando un contenido depende de tener la web publicada
   con dominio propio (Facebook, por ejemplo, no carga previsualizando el archivo en local) */
.embed-placeholder {
  border: 1px dashed var(--terracotta);
  background: var(--paper);
  border-radius: 8px;
  padding: 1rem;
  font-size: 0.85rem;
  color: #7a6d5c;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Interactividad: carrusel del hero — más rápido y con un ligero zoom continuo (Ken Burns)
   para que se note claramente que las imágenes se mueven solas. */
.hero.carousel { background-image: none !important; }
.hero.carousel .slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  animation: heroFade 12s infinite, kenburns 12s infinite;
  transform-origin: center;
}
.hero.carousel .slide:nth-child(1) { animation-delay: 0s, 0s; }
.hero.carousel .slide:nth-child(2) { animation-delay: 4s, 4s; }
.hero.carousel .slide:nth-child(3) { animation-delay: 8s, 8s; }
@keyframes heroFade {
  0% { opacity: 0; }
  4% { opacity: 1; }
  30% { opacity: 1; }
  36% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes kenburns {
  0% { transform: scale(1.0); }
  100% { transform: scale(1.12); }
}

/* Carrusel en formato cuadrado y más grande — para cuando las fotos son en
   vertical (retrato) y el formato panorámico normal del hero las recortaba
   demasiado. Al ser más cuadrado, se pierde mucha menos foto por los lados. */
.hero.carousel.square {
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 760px;
  margin: 0 auto;
}
@media (max-width: 480px) {
  .hero.carousel.square { aspect-ratio: 4 / 5; }
}

/* Galería con lightbox */
.masonry {
  columns: 3 220px;
  column-gap: 0.8rem;
}
.masonry figure {
  break-inside: avoid;
  margin: 0 0 0.8rem;
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.masonry figure img {
  width: 100%;
  display: block;
  transition: transform .3s;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}
.masonry figure:hover img { transform: scale(1.04); }
.masonry figure figcaption {
  position: absolute; left:0; right:0; bottom:0;
  background: linear-gradient(0deg, rgba(0,0,0,0.65), transparent);
  color: #fff; padding: 0.6rem 0.7rem 0.4rem; font-size: 0.78rem;
  margin: 0;
}

.lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20,16,10,0.92);
  align-items: center; justify-content: center;
  flex-direction: column;
  padding: 2rem;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 80vh; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.lightbox .lb-caption { color: var(--cream); margin-top: 0.8rem; font-style: italic; text-align:center; }
.lightbox .lb-close { position: absolute; top: 1.2rem; right: 1.6rem; color: var(--cream); font-size: 2rem; cursor: pointer; background:none; border:none; }
.lightbox .lb-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.1); border:none; color:var(--cream); font-size:2rem; padding:0.5rem 0.9rem; cursor:pointer; border-radius:4px; }
.lightbox .lb-prev { left: 1rem; }
.lightbox .lb-next { right: 1rem; }

/* Estrellas-enlace en el hero: cada red social es una estrella en el "campo de estrellas"
   (arco tipo Vía Láctea / Compostela) que cruza la parte de arriba de cada foto del carrusel. */
.starlinks { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* La banda difusa que sugiere el arco de la Vía Láctea, por encima de fotos que no la tengan ya */
.starlinks::before {
  content: '';
  position: absolute;
  top: -75%; left: 2%; right: 2%;
  height: 150%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(247,241,230,0.28) 0%, rgba(224,165,48,0.14) 35%, transparent 72%);
  filter: blur(3px);
  pointer-events: none;
}
.starlinks.milkyway::before { content: none; } /* la foto ya tiene su propia Vía Láctea */

.star-hot {
  position: absolute;
  width: 150px; height: 150px;
  margin-left: -75px; margin-top: -75px;
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.star-hot::before {
  content: '';
  position: absolute;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: rgba(20,16,10,0.25);
  filter: blur(2px);
}
.star-hot .glow {
  position: relative;
  width: 64px; height: 64px;
  background: var(--star);
  clip-path: polygon(50% 0%, 63% 35%, 100% 35%, 71% 57%, 82% 91%, 50% 70%, 18% 91%, 29% 57%, 0% 35%, 37% 35%);
  box-shadow: 0 0 22px 8px rgba(224,165,48,0.95), 0 0 46px 16px rgba(224,165,48,0.55);
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.6));
  animation: twinkle 3.2s ease-in-out infinite;
  transition: transform .2s;
}

/* Sobre la foto de la Vía Láctea, las estrellas son blancas y muy brillantes,
   para que se note claramente que se puede pinchar en ellas */
.milkyway .glow {
  background: #ffffff;
  box-shadow: 0 0 26px 10px rgba(255,255,255,0.95), 0 0 55px 20px rgba(255,255,255,0.6), 0 0 90px 30px rgba(255,238,190,0.35);
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.5));
}
.star-hot:nth-of-type(1) .glow { animation-delay: 0s; }
.star-hot:nth-of-type(2) .glow { animation-delay: .5s; }
.star-hot:nth-of-type(3) .glow { animation-delay: 1s; }
.star-hot:nth-of-type(4) .glow { animation-delay: 1.5s; }
.star-hot:nth-of-type(5) .glow { animation-delay: 2s; }
.star-hot:nth-of-type(6) .glow { animation-delay: 2.5s; }
@keyframes twinkle {
  0%, 100% { opacity: 0.8; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.12); }
}
.star-hot:hover .glow, .star-hot:focus .glow { transform: scale(1.4); }
.star-hot .tip {
  position: absolute;
  top: 115%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(20,16,10,0.88);
  color: var(--cream);
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}

/* Botón flotante de WhatsApp — visible en todas las páginas, siempre en el mismo sitio,
   para escribir a Marta directamente. Se inyecta desde script.js. Sin logo de marca:
   un simple icono de bocadillo de conversación, en los colores de la web.
   Grande y con el texto siempre visible (no solo al pasar el ratón), para que se note
   bien incluso a quien entra desde el móvil y no se fija en iconos pequeños. */
.whatsapp-float {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--green);
  color: white;
  text-decoration: none;
  padding: 1rem 1.4rem;
  border-radius: 50px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.32);
  transition: transform .15s, box-shadow .15s;
}
.whatsapp-float svg { width: 32px; height: 32px; flex-shrink: 0; }
.whatsapp-float .wf-text {
  white-space: nowrap;
  font-size: 1.05rem;
  font-weight: bold;
  line-height: 1.3;
}
.whatsapp-float .wf-text small {
  display: block;
  font-size: 0.72rem;
  font-weight: normal;
  opacity: 0.9;
}
.whatsapp-float:hover, .whatsapp-float:focus {
  transform: scale(1.04);
  box-shadow: 0 8px 26px rgba(0,0,0,0.4);
}
@media (max-width: 560px) {
  .whatsapp-float {
    right: 0.7rem;
    bottom: 0.7rem;
    padding: 0.85rem 1.1rem;
  }
  .whatsapp-float .wf-text { font-size: 0.92rem; }
  .whatsapp-float svg { width: 28px; height: 28px; }
}
.star-hot:hover .tip, .star-hot:focus .tip { opacity: 1; }

/* Botón flotante de donativo — al otro lado de la pantalla que el de WhatsApp,
   visible en todas las páginas. Al pulsarlo abre un pequeño panel tipo chat
   con las distintas formas de colaborar (PayPal, Bizum, transferencia).
   Se inyecta desde script.js, igual que el de WhatsApp. */
.donate-float {
  position: fixed;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--terracotta);
  color: white;
  border: none;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  padding: 1rem 1.4rem;
  border-radius: 50px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.32);
  transition: transform .15s, box-shadow .15s;
}
.donate-float .df-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.donate-float .df-text {
  white-space: nowrap;
  font-size: 1.05rem;
  font-weight: bold;
  line-height: 1.3;
  text-align: left;
}
.donate-float .df-text small {
  display: block;
  font-size: 0.72rem;
  font-weight: normal;
  opacity: 0.9;
}
.donate-float:hover, .donate-float:focus {
  transform: scale(1.04);
  box-shadow: 0 8px 26px rgba(0,0,0,0.4);
  background: var(--terracotta-dark);
}

/* El panel que se abre al pulsar el botón de donativo — como una pequeña
   ventana de chat, con una opción por cada forma de colaborar. */
.donate-panel {
  display: none;
  position: fixed;
  left: 1.2rem;
  bottom: 5.6rem;
  z-index: 51;
  width: min(320px, calc(100vw - 2.4rem));
  background: var(--paper);
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.35);
  padding: 1.1rem 1.1rem 1.2rem;
  flex-direction: column;
  gap: 0.6rem;
}
.donate-panel.open { display: flex; }
.donate-panel .dp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.2rem;
}
.donate-panel h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--terracotta-dark);
}
.donate-panel .dp-sub {
  margin: 0.1rem 0 0;
  font-size: 0.82rem;
  color: #7a6d5c;
}
.donate-panel .dp-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: #7a6d5c;
  padding: 0 0.2rem;
}
.donate-panel .dp-option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.7rem;
  border-radius: 10px;
  background: rgba(193,98,45,0.07);
  text-decoration: none;
  color: var(--ink);
}
.donate-panel .dp-option:hover { background: rgba(193,98,45,0.14); }
.donate-panel .dp-option .dp-icon { font-size: 1.4rem; flex-shrink: 0; }
.donate-panel .dp-option .dp-label { font-weight: bold; display: block; }
.donate-panel .dp-option .dp-detail { font-size: 0.8rem; color: #7a6d5c; display: block; }
@media (max-width: 560px) {
  .donate-float {
    left: 0.7rem;
    bottom: 0.7rem;
    padding: 0.85rem 1.1rem;
  }
  .donate-float .df-text { font-size: 0.92rem; }
  .donate-panel { left: 0.7rem; bottom: 5.1rem; }
}

/* ============================================================
   RESPONSIVE — repaso general para que todo se vea bien en móvil.
   Además del fix de las estrellas tapando el texto (más arriba, en
   .hero .overlay), aquí se ajustan: el tamaño del texto y las estrellas
   del hero de portada, la cabecera, y los dos botones flotantes
   (WhatsApp + donativo), que en pantallas muy estrechas podían llegar
   a solaparse entre sí si se dejaban con el texto completo.
   ============================================================ */

/* Tablet / móvil grande: el hero de portada y sus estrellas se reducen
   un poco para dejar más aire al texto. */
@media (max-width: 700px) {
  .hero.hero-home { min-height: 460px; }
  .hero h1 { font-size: 1.8rem; }
  .hero p.tagline { font-size: 1rem; }
  .star-hot { width: 96px; height: 96px; margin-left: -48px; margin-top: -48px; }
  .star-hot::before { width: 58px; height: 58px; }
  .star-hot .glow { width: 44px; height: 44px; }
  .star-hot .tip { font-size: 0.74rem; padding: 0.25rem 0.55rem; }
}

/* Móvil normal: cabecera y márgenes más compactos. */
@media (max-width: 480px) {
  header.site { padding: 0.5rem 1rem; gap: 0.4rem; }
  header.site .brand { font-size: 1.05rem; }
  nav.site a { font-size: 0.85rem; }
  main { padding: 1.8rem 1rem 3rem; }
  .hero.hero-home { min-height: 400px; }
  .hero h1 { font-size: 1.5rem; }
  .hero p.tagline { font-size: 0.92rem; }
  .hero .overlay { padding: 1.4rem 1rem 1.2rem; }
  .star-hot { width: 74px; height: 74px; margin-left: -37px; margin-top: -37px; }
  .star-hot::before { width: 46px; height: 46px; }
  .star-hot .glow { width: 34px; height: 34px; }

  /* Los dos botones flotantes (WhatsApp a la derecha, donativo a la izquierda)
     pasan a ser solo un icono redondo: con el texto completo, en un móvil
     estrecho los dos juntos no caben sin solaparse en el centro de la pantalla. */
  .whatsapp-float, .donate-float {
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    right: 0.6rem;
    left: auto;
    bottom: 0.6rem;
  }
  .donate-float { right: auto; left: 0.6rem; }
  .whatsapp-float .wf-text, .donate-float .df-text { display: none; }
  .whatsapp-float svg { width: 26px; height: 26px; }
  .donate-float .df-icon { font-size: 1.4rem; }
  .donate-panel { bottom: 4.4rem; }
}