@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;500;700&display=swap');

:root{
  --grad-start:#a7c9ce;
  --grad-mid:#d8d0e3;
  --grad-end:#e6d5c8;
  --text-dark:#222;
  --text-light:#fff;
}

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

body{
  font-family:'Cormorant Garamond',serif;
  color:var(--text-dark);
  line-height:1.6;
  background:#fff;
}
/* ——— Fondo degradé global para sub-páginas ——— */
body.subpage {
  /* Degradé horizontal de izquierda (celeste) a derecha (beige) */
  background: linear-gradient(
               90deg,           /* 0° = top→bottom,  90° = left→right */
               #a7c9ce 0%,
               #d8d0e3 50%,
               #e6d5c8 100%);
}
/* Make every embedded YouTube player background transparent */

/* Navigation */
nav{
  position:fixed;
  top:0;left:0;
  width:100%;
  display:flex;
  justify-content:flex-end;
  padding:1.2rem 2rem;
  background: linear-gradient(
               135deg,
               rgba(167,201,206,0.9)  0%,
               rgba(216,208,227,0.9) 50%,
               rgba(230,213,200,0.9) 100%);
  backdrop-filter: blur(8px); 
  z-index:1000;
}
nav a{
  color:var(--text-light);
  text-decoration:none;
  margin-left:2rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.1em;
  transition:color .3s;
}
nav a:hover{color:rgba(255,255,255,.7);}


/* Hero */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  background:linear-gradient(135deg,var(--grad-start),var(--grad-mid),var(--grad-end));
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  top:0;
  left:-50%;
  width:200%;
  height:100%;
  background:inherit;
  animation:slide 40s ease-in-out infinite alternate;
  z-index:-1;
}
@keyframes slide{
  0%{transform:translateX(0);}
  100%{transform:translateX(25%);}
}
.hero h1{
  font-size:clamp(2.5rem,5vw,4rem);
  color:var(--text-light);
  letter-spacing:2px;
  font-weight:500;
  margin-bottom:1rem;
}
.hero p{
  color:rgba(255,255,255,0.85);
  font-style:italic;
  font-size:1.25rem;
  max-width:600px;
}

/* Main container */
main{
  margin-top:-4rem;
  background:#fff;
  border-radius:10px 10px 0 0;
  max-width:920px;
  margin-inline:auto;
  padding:6rem 2rem 4rem;
  box-shadow:0 -6px 12px rgba(0,0,0,0.05);
}

section{margin-bottom:4rem;}

section h2{
  font-size:2rem;
  margin-bottom:1rem;
  position:relative;
}
section h2::after{
  content:"";
  position:absolute;
  bottom:-5px;left:0;
  width:3rem;height:2px;
  background:var(--grad-mid);
}

.list{list-style:none;padding-left:0;}
.list li{padding-left:1rem;margin-bottom:.6rem;position:relative;}
.list li::before{content:"—";position:absolute;left:0;color:var(--grad-mid);}

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.5rem;
}
.gallery img{
  width:100%;
  border-radius:4px;
  transition:transform .3s;
}
.gallery img:hover{transform:scale(1.05);}

.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.5rem;
  background: transparent !important;
}
.video-grid iframe{
  width:100%;
  aspect-ratio:16/9;
  border:none;
  border-radius:4px;
  background: transparent !important;
}

footer{
  text-align:center;
  padding:2rem;
  font-size:.9rem;
  color:#999;
}

@media(max-width:650px){
  nav{justify-content:center;backdrop-filter:blur(10px);}
  nav a{margin-left:1rem;font-size:.8rem;}
}
.video-item iframe{
  background: transparent !important;   /* removes default white bg */
}

body.subpage main{
  background: transparent !important;     /* no fill */
  box-shadow: none !important;            /* no outer glow */
  border: none !important;                /* no outline */
  /* keep padding & max-width if you still want margin; adjust as needed */
}

/* Optional: be sure internal sections inherit transparency too */
body.subpage section{
  background: transparent !important;
  border: none !important;
}
/* ——— Colores gris claro en sub-páginas ——— */
body.subpage nav a{
  /* gris más claro que #666; ajusta a gusto */
  color: #bbb !important;
}

/* mismo tono para el hover si lo ves útil */


/* --- Unified grey tone for sub-pages --- */
body.subpage nav a,
body.subpage .video-item h3{
  color: #9c9c9c !important;   /* medium-light grey, tweak to taste */
}

/* Optional: slightly lighter on hover */
body.subpage nav a:hover{
  color: #d0d0d0 !important;
}