:root{
  /* PALETA (ajusta los colores aquí) */
    --bg: #ffffff;                          /*Color del fondo*/
    --fg: #030303;                          /*Color texto títulos y tarjetas*/
    --muted: #413d3d;                       /*Color texto párrafos titulos*/
    --primary: #506E3C;                     /*Color resaltados*/
    --primary-buttons: #506e3c8f;            /*Color botones resaltados*/
    --primary-contrast: #170d0d;            /*Color texto botones resaltados*/
    --accent: #d99aa2;
    --card: #dfcab0a2;                        /*Fondo tarjetas*/
    --card_solid: #dfcab0e7;                        /*Fondo tarjetas*/

    --shadow: 0 10px 30px rgba(0,0,0,.4);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #ffffff;                          /*Color del fondo*/
    --fg: #030303;                          /*Color texto títulos y tarjetas*/
    --muted: #413d3d;                       /*Color texto párrafos titulos*/
    --primary: #506E3C;                     /*Color resaltados*/
    --primary-buttons: #506e3c8f;            /*Color botones resaltados*/
    --primary-contrast: #170d0d;            /*Color texto botones resaltados*/
    --accent: #d99aa2;
    --card: #dfcab0a2;                        /*Fondo tarjetas*/
    --card_solid: #dfcab0e7;                        /*Fondo tarjetas*/

    --shadow: 0 10px 30px rgba(0,0,0,.4);
  }
  .hero::before{ opacity:.35; }
}


*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Montserrat,system-ui,Segoe UI,Roboto,Arial,sans-serif}

/* Enlaces */
a{color:inherit}
.brand a{text-decoration:none}

/* Contenedor base */
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header / navegación */
header{position:sticky;top:0;z-index:50;background:color-mix(in oklab, var(--bg) 92%, transparent);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid color-mix(in oklab, var(--fg) 10%, transparent)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.brand{font-family:"Playfair Display",serif;font-weight:700;font-size:22px;letter-spacing:.5px}
nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;align-items: center;}
nav a{padding:8px 10px;border-radius:10px;text-decoration:none;font-weight:600;color:var(--fg)}
nav a:hover{background:color-mix(in oklab, var(--primary-buttons) 40%, transparent)}
.menu-btn{display:none}


@media (max-width:860px){
  nav ul{display:none}
  .menu-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid color-mix(in oklab, var(--fg) 14%, transparent);border-radius:10px;background:transparent;color:var(--fg)}
  .menu-open nav ul{display:flex;flex-direction:column;position:absolute;top:62px;background-color:var(--card_solid);box-shadow:var(--shadow);border-radius:14px;padding:12px}
  .menu-open nav a{padding:12px}
}

/* Hero */
.hero{
  position:relative;
  min-height:78svh;
  display:grid;
  place-items:center;
  overflow:hidden
  
}
.hero::before{content:"";position:absolute;inset:0;background:url('../media/L&S_Fondo.jpg') center/cover no-repeat;filter:grayscale(.1);opacity:.58}
.hero .inner{position:relative;text-align:center;padding:80px 0}
.hero .badge {
  display: inline-block;
  margin-bottom: 40px; /* separa del título */
  transform: translateY(-40px); 
}
.names{font-family:"Playfair Display",serif;font-size:clamp(36px,6vw,72px);margin:0 0 10px}
.date{font-size:clamp(16px,2.3vw,22px);letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;border:1px solid color-mix(in oklab, var(--fg) 14%, transparent);text-decoration:none;font-weight:700}
.btn.primary{background:var(--primary-buttons);color:var(--primary-contrast);border-color:transparent}
.btn.secondary{background:transparent}
.btn-small{padding:8px 12px;font-size:14px}

/* Secciones */
section{
    padding:70px 0;
}

h2{font-family:"Playfair Display",serif;font-size:clamp(28px,4vw,40px);margin:0 0 16px}
p.lead{font-size:18px;color:var(--muted);max-width:70ch}


/* Tarjeta grande por sección */
section > .container{
  background: color-mix(in oklab, var(--primary) 10%, white);
  border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 28px;
}

@media (max-width:640px){
  section{ padding:56px 0; }
  section > .container{ padding:28px 18px; border-radius:12px; }
}




/* Tarjetas */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.card h3{margin:0 0 8px;font-size:20px}
@media (max-width:920px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

/* Timeline */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.time-item{background:var(--card);border-radius:14px;padding:16px;box-shadow:var(--shadow);text-align:center}
.time-item .hour{font-weight:800;font-size:22px;color:var(--primary)}
@media (max-width:900px){.timeline{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.timeline{grid-template-columns:1fr}}

/* Galería */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gallery img{width:100%;height:220px;object-fit:cover;border-radius:12px}
@media (max-width:840px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.gallery{grid-template-columns:1fr}}

/* Footer */
footer{padding:40px 0;border-top:1px solid color-mix(in oklab, var(--fg) 10%, transparent);text-align:center;color:var(--muted)}

/* Utilidades */
.center{display:grid;place-items:center}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:color-mix(in oklab, var(--card) 80%, transparent);color:var(--primary);font-weight:700;font-size:12px;letter-spacing:.5px;text-transform:uppercase}
.note{font-size:14px;color:var(--muted)}
.hr{height:1px;background:color-mix(in oklab, var(--fg) 10%, transparent);margin:24px 0;border-radius:999px}



.nav{ position: relative; }

/* --- Móvil: menú lateral derecho estrecho --- */
@media (max-width:860px){
  /* El panel del menú */
  nav ul{
    /* anclado al viewport, no al .container centrado */
    position: fixed;
    top: var(--header-h, 62px);
    right: 0;          /* anclado al borde derecho de la pantalla */
    left: auto;        /* desactiva anclaje izquierdo */
    width: min(150px, 80vw);

    /* estética */
    background: var(--card);
    box-shadow: -4px 0 16px rgba(0,0,0,.15);
    border-radius: 14px 0 0 14px;    /* solo redondeo interior */
    padding: 12px;

    /* layout */
    display: none;                   /* cerrado por defecto */
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;           /* elementos a la derecha */
    text-align: right;
    z-index: 9999;                   /* encima de todo */
  }

  /* Abierto */
  body.menu-open nav ul{ display: flex; }

  /* Links dentro del panel */
  body.menu-open nav a{
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    align-self: flex-end;            /* cada “píldora” se alinea a la derecha */
    width: auto;                     /* que no tome todo el ancho */
    padding: 12px 16px;
  }

  .nav{
    display: flex;
    align-items: center;
    justify-content: space-between;  /* brand a la izquierda, botón a la derecha */
    padding: 12px 16px;              /* margen lateral */
  }

  .brand{
    margin-left: 4px;                /* pequeño espacio desde el borde */
    font-size: 20px;                 /* opcional: un poco más pequeño en móvil */
  }

  .menu-btn{
    margin-left: auto;               /* asegura que se pega a la derecha */
  }                   /* por delante del brand si se solapan */
}