:root{
    --violeta: #4A2E5C;
    --violeta-dark: #351F42;
    --amarillo: #F4B942;
    --crudo: #FAF6ED;
    --crudo-2: #F1E9D8;
    --tinta: #2B2118;
    --verde-lauquen: #1B4B47;
    --linea: rgba(43,33,24,0.12);
    --max-w: 1120px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--crudo);
    color:var(--tinta);
    font-family:'Work Sans', sans-serif;
    font-size:17px;
    line-height:1.6;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces', serif;
    font-weight:600;
    letter-spacing:-0.01em;
    margin:0;
  }
  a{color:inherit;}
  .wrap{max-width:var(--max-w); margin:0 auto; padding:0 28px;}
  .eyebrow{
    text-transform:uppercase;
    letter-spacing:0.14em;
    font-size:0.75rem;
    font-weight:600;
    color:var(--violeta);
  }

  /* ---------- NAV ---------- */
  header.site{
    position:sticky; top:0; z-index:50;
    background:rgba(250,246,237,0.9);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--linea);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 28px;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family:'Fraunces', serif; font-weight:600; font-size:1.05rem;
    color:var(--violeta-dark);
    text-decoration:none;
  }
  .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--amarillo); border:2px solid var(--violeta-dark);}
  nav ul{list-style:none; display:flex; gap:28px; margin:0; padding:0;}
  nav ul a{text-decoration:none; font-size:0.92rem; font-weight:500; color:var(--tinta); opacity:0.8;}
  nav ul a:hover{opacity:1; color:var(--violeta);}
  @media (max-width:720px){ nav ul{display:none;} }

  /* ---------- HERO ---------- */
  .hero{position:relative; overflow:hidden; min-height:88vh; display:flex; align-items:flex-end;}
  .hero img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    filter:saturate(1.05);
  }
  .hero::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(43,33,24,0.15) 0%, rgba(43,33,24,0.05) 35%, rgba(43,33,24,0.75) 100%);
  }
  .hero-content{position:relative; z-index:2; padding:64px 28px 56px; width:100%; color:#fff;}
  .hero-content .wrap{padding:0;}
  .hero-tag{
    display:inline-block; background:var(--amarillo); color:var(--violeta-dark);
    font-weight:700; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
    padding:6px 12px; border-radius:100px; margin-bottom:18px;
  }
  .hero h1{font-size:clamp(2.4rem, 5.5vw, 4.2rem); line-height:1.03; max-width:14ch;}
  .hero p.lead{max-width:46ch; font-size:1.15rem; margin-top:18px; opacity:0.95; font-weight:400;}
  .hero-meta{display:flex; gap:28px; margin-top:34px; flex-wrap:wrap; align-items:center;}
  .hero-meta div{border-left:2px solid var(--amarillo); padding-left:12px;}
  .hero-meta .num{font-family:'Fraunces',serif; font-size:1.3rem; font-weight:600; display:block;}
  .hero-meta .lbl{font-size:0.78rem; opacity:0.85; text-transform:uppercase; letter-spacing:0.06em;}
  .hero-logo{border-left:none !important; padding-left:0 !important;}
  .hero-logo img{width:64px; height:64px; border-radius:50%; display:block; box-shadow:0 4px 14px rgba(0,0,0,0.35);}

  /* ---------- WIND DIVIDER (signature element) ---------- */
  .wind-divider{width:100%; height:64px; display:block;}
  .wind-divider path{fill:none; stroke:var(--violeta); stroke-width:2; opacity:0.35;}
  .wind-divider.flip{transform:scaleY(-1);}

  /* ---------- SECTIONS ---------- */
  section{padding:88px 0;}
  section.tight{padding:56px 0;}
  .section-head{max-width:640px; margin-bottom:48px;}
  .section-head h2{font-size:clamp(1.8rem,3.2vw,2.6rem); margin-top:10px;}
  .section-head p{color:rgba(43,33,24,0.72); margin-top:14px; font-size:1.05rem;}

  /* Quienes somos */
  .quienes{display:grid; grid-template-columns: 1.1fr 0.9fr; gap:56px; align-items:start;}
  @media (max-width:860px){ .quienes{grid-template-columns:1fr;} }
  .quienes p{margin:0 0 18px; color:rgba(43,33,24,0.85);}
  .quienes p:last-child{margin-bottom:0;}
  .panuelo-card{
    background:
      linear-gradient(100deg, var(--violeta-dark) 0%, rgba(74,46,92,0.94) 32%, rgba(74,46,92,0.55) 62%, rgba(74,46,92,0.18) 100%),
      url('images/panuelo_bg.jpg');
    background-size:cover;
    background-position:center;
    color:var(--crudo);
    border-radius:18px; padding:34px; position:relative; overflow:hidden;
  }
  .panuelo-card::before{
    content:""; position:absolute; top:-40px; right:-40px; width:160px; height:160px;
    background:var(--amarillo); border-radius:50%; opacity:0.9;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }
  .panuelo-card h3{color:#fff; font-size:1.3rem; position:relative; text-shadow:0 1px 8px rgba(43,33,24,0.4);}
  .panuelo-card .swatches{display:flex; gap:14px; margin:20px 0; position:relative;}
  .swatch{flex:1; border-radius:10px; padding:16px 14px; font-size:0.85rem;}
  .swatch.v{background:var(--violeta-dark);}
  .swatch.y{background:var(--amarillo); color:var(--violeta-dark); font-weight:600;}
  .panuelo-card p{position:relative; font-size:0.95rem; opacity:0.98; margin:0 0 12px; color:#fff; text-shadow:0 1px 6px rgba(43,33,24,0.55), 0 2px 14px rgba(43,33,24,0.4);}
  .name-note{
    margin-top:28px; padding-top:22px; border-top:1px solid var(--linea);
    font-size:0.95rem; color:rgba(43,33,24,0.72);
  }
  .name-note strong{color:var(--violeta);}

  /* Ramas - path/journey layout */
  .ramas-track{position:relative;}
  .ramas-track .line{
    position:absolute; left:0; right:0; top:74px; height:2px;
    background:repeating-linear-gradient(90deg, var(--violeta) 0 10px, transparent 10px 20px);
    opacity:0.4; z-index:0;
  }
  @media (max-width:860px){ .ramas-track .line{display:none;} }
  .ramas-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; z-index:1;}
  @media (max-width:860px){ .ramas-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:520px){ .ramas-grid{grid-template-columns:1fr;} }
  .rama-card{
    background:#fff; border-radius:16px; overflow:hidden;
    border:1px solid var(--linea);
    display:flex; flex-direction:column;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration:none; color:inherit; cursor:pointer;
  }
  .rama-card:hover{transform:translateY(-4px); box-shadow:0 10px 24px rgba(43,33,24,0.12);}
  .rama-badge{aspect-ratio:3/2; overflow:hidden; position:relative;}
  .rama-badge img{width:100%; height:100%; object-fit:cover; display:block;}
  .rama-age{
    position:absolute; top:10px; right:10px; background:rgba(43,33,24,0.75); color:#fff;
    font-size:0.72rem; font-weight:600; padding:4px 9px; border-radius:100px; letter-spacing:0.02em;
  }
  .rama-body{padding:20px 20px 24px; flex:1; display:flex; flex-direction:column;}
  .rama-body h3{font-size:1.15rem; line-height:1.2;}
  .rama-body .lema{
    color:var(--violeta); font-weight:600; font-size:0.82rem; text-transform:uppercase;
    letter-spacing:0.05em; margin-top:8px;
  }
  .rama-body p{font-size:0.9rem; color:rgba(43,33,24,0.72); margin-top:10px; flex:1;}

  /* Equipos */
  .equipos-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  @media (max-width:860px){ .equipos-grid{grid-template-columns:1fr;} }
  .equipo-card{
    background:var(--crudo-2); border-radius:16px; padding:28px;
    border-left:4px solid var(--violeta);
    display:flex; flex-direction:column; align-items:flex-start;
  }
  .equipo-head{display:flex; align-items:center; gap:16px; margin-bottom:4px;}
  .equipo-badge{
    width:60px; height:60px; border-radius:50%; overflow:hidden;
    box-shadow:0 4px 14px rgba(43,33,24,0.18);
    flex-shrink:0;
  }
  .equipo-badge img{width:100%; height:100%; object-fit:cover; display:block;}
  .equipo-card h3{font-size:1.15rem; color:var(--violeta-dark); line-height:1.25;}
  .equipo-card .lema{
    display:inline-block; margin-top:10px; font-size:0.78rem; font-weight:600;
    color:var(--verde-lauquen); text-transform:uppercase; letter-spacing:0.04em;
  }
  .equipo-card p{font-size:0.92rem; color:rgba(43,33,24,0.75); margin-top:12px;}

  /* Aniversario / vida en el grupo */
  .aniversario{
    background:
      linear-gradient(100deg, #4A4B22 0%, rgba(74,75,34,0.94) 30%, rgba(74,75,34,0.5) 58%, rgba(74,75,34,0.12) 100%),
      url('images/aniversario_bg.jpg');
    background-size:cover;
    background-position:center;
    color:var(--crudo);
    border-radius:24px; padding:56px; position:relative; overflow:hidden;
  }
  .wrap > .aniversario{margin:0;}
  .aniversario .eyebrow{color:var(--amarillo);}
  .aniversario blockquote{
    font-family:'Fraunces', serif; font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:500;
    line-height:1.35; margin:20px 0 0; max-width:26ch;
    text-shadow:0 1px 6px rgba(20,20,10,0.5), 0 2px 14px rgba(20,20,10,0.4);
  }
  .aniversario p{text-shadow:0 1px 6px rgba(20,20,10,0.45);}
  .aniversario .tribus{display:flex; flex-wrap:wrap; gap:10px; margin-top:32px;}
  .tribu-chip{
    font-size:0.78rem; font-weight:600; padding:7px 14px; border-radius:100px;
    border:1px solid rgba(250,246,237,0.35);
    background:rgba(20,20,10,0.25);
  }

  /* Contacto */
  .contacto{
    display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  }
  @media (max-width:860px){ .contacto{grid-template-columns:1fr;} }
  .contacto-info dl{margin:24px 0 0; display:grid; gap:16px;}
  .contacto-info dt{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--violeta); font-weight:600;}
  .contacto-info dd{margin:4px 0 0; font-size:1.05rem;}
  .contacto-card{
    background:var(--amarillo); border-radius:20px; padding:38px;
  }
  .contacto-card h3{color:var(--violeta-dark); font-size:1.4rem; max-width:16ch;}
  .contacto-card p{color:rgba(53,31,66,0.85); margin-top:12px;}
  .btn{
    display:inline-block; margin-top:20px; background:var(--violeta-dark); color:#fff;
    padding:13px 26px; border-radius:100px; text-decoration:none; font-weight:600; font-size:0.92rem;
  }
  .social-row{display:flex; gap:10px; margin-top:6px;}
  .social-btn{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--violeta-dark); color:#fff; text-decoration:none;
    padding:9px 16px; border-radius:100px; font-size:0.86rem; font-weight:600;
  }
  .social-btn svg{width:16px; height:16px; fill:currentColor;}

  footer{
    background:var(--tinta); color:rgba(250,246,237,0.65);
    padding:40px 0; font-size:0.88rem;
  }
  footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
  footer strong{color:var(--crudo);}

/* ---------- RAMA DETAIL PAGE ---------- */
.rama-hero{position:relative; overflow:hidden; min-height:46vh; display:flex; align-items:flex-end;}
.rama-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.rama-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(43,33,24,0.25) 0%, rgba(43,33,24,0.15) 35%, rgba(43,33,24,0.82) 100%);
}
.rama-hero-content{position:relative; z-index:2; padding:48px 28px 44px; width:100%; color:#fff;}
.rama-hero-content .wrap{padding:0;}
.rama-back{
  display:inline-flex; align-items:center; gap:6px; color:#fff; opacity:0.85;
  text-decoration:none; font-size:0.88rem; font-weight:500; margin-bottom:18px;
}
.rama-back:hover{opacity:1;}
.rama-hero-tag{
  display:inline-block; background:var(--amarillo); color:var(--violeta-dark);
  font-weight:700; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
  padding:6px 12px; border-radius:100px; margin-bottom:16px;
}
.rama-hero h1{font-size:clamp(2rem, 4.5vw, 3.4rem); line-height:1.05; max-width:16ch;}
.rama-hero .lema-hero{font-size:1.05rem; opacity:0.92; margin-top:12px; font-weight:500;}

.rama-body-section{max-width:760px;}
.rama-body-section p{margin:0 0 20px; color:rgba(43,33,24,0.85); font-size:1.05rem;}
.rama-body-section p:last-child{margin-bottom:0;}

.galeria-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:8px;
}
@media (max-width:720px){ .galeria-grid{grid-template-columns:repeat(2, 1fr);} }
.galeria-grid figure{margin:0; border-radius:14px; overflow:hidden; aspect-ratio:4/3; background:var(--crudo-2);}
.galeria-grid img{width:100%; height:100%; object-fit:cover; display:block;}
.galeria-empty{
  border:1.5px dashed var(--linea); border-radius:14px; padding:36px; text-align:center;
  color:rgba(43,33,24,0.55); font-size:0.95rem;
}