/* =====================================================
   Sé Interiorismo — Styles (minimal + más acción)
   ===================================================== */

/* 0) Tokens (más cortos, más uniformes) */
:root{
  /* Color */
  --coral:   #E85C4A;   /* acción */
  --ink:     #123733;   /* texto principal */
  --muted:   #2F2F2F;   /* texto secundario (más contraste) */

  /* Fondos más claros (más aire) */
  --cream:   #FDFBF7;   /* casi blanco cálido */
  --sand:    #F7F2EA;   /* bloques suaves */
  --stone:   #E8E2D8;   /* bordes */
  --white:   #FFFFFF;

  /* Tipos */
  --sans:"Corbel Light", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --accent:"Dancing Script","Pacifico",cursive;

  /* Tamaños (más grandes) */
  --text: clamp(1.08rem, 1.02rem + .35vw, 1.18rem);
  --small: 1rem;
  --h1: clamp(2.35rem, 1.9rem + 2.1vw, 3.25rem);
  --h2: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
  --h3: clamp(1.35rem, 1.22rem + .65vw, 1.65rem);

  /* Espaciado (escala más corta y consistente) */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4rem;

  /* Forma (2 radios + 1 sombra) */
  --r1:12px; --r2:20px;
  --shadow:0 6px 18px rgba(0,0,0,.06);

  --container:1080px;


  /* Ajustables (si quieres afinar la sensación) */
  --nav-h-top: 84px;     /* altura arriba del todo */
  --nav-h-scroll: 60px;  /* altura tras scroll */

  /* Sombra/borde ultra sutil (luxury minimal) */
  --nav-border: color-mix(in srgb, var(--ink) 10%, transparent);
  --nav-shadow: 0 10px 28px rgba(0,0,0,.05);

  /* Subrayados ultra finos */
  --u-thickness: 2px;
  --u-offset: 4px;
  --u-color: color-mix(in srgb, var(--coral) 55%, transparent);

}

/* 1) Reset (igual) */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html:focus-within{ scroll-behavior:smooth; }
html,body{ min-height:100%; }
img,svg,video,canvas{ display:block; max-width:100%; }
input,button,textarea,select{ font:inherit; }

/* Links: más acción (sin gritar) */
/*a{
  color: color-mix(in srgb, var(--ink) 85%, var(--coral));
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--coral) 35%, transparent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}*/
a{ color:inherit; text-decoration:none; }
a:hover{
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--coral) 70%, transparent);
}

/* 2) Base */
body{
  font-family:var(--sans);
  font-size:var(--text);
  line-height:1.7;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

p{ margin:0 0 var(--s2); }
strong{ font-weight:700; }

h1,h2,h3{
  font-weight:700;
  line-height:1.15;
  letter-spacing:-0.012em;
  color:var(--ink);
}
h1{ font-size:var(--h1); letter-spacing:-0.02em; }
h2{ font-size:var(--h2); }
h3{ font-size:var(--h3); }

.muted{ color: color-mix(in srgb, var(--ink) 60%, var(--muted)); }
.accent{ font-family:var(--accent); font-weight:600; color:var(--coral); }

/* 3) Layout + ritmo (más uniforme) */
.container{ width:min(100% - 2rem, var(--container)); margin-inline:auto; }

.section{ padding-block:var(--s6); }
.section--hero{ padding-block:clamp(4rem, 7vw, 9rem); }

.section-title{ margin:0 0 var(--s2); }
.stack > * + *{ margin-top:var(--s2); }

.cluster{ display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; }
.grid{ display:grid; gap:var(--s3); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }

@media (max-width:960px){
  .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px){
  .grid-2,.grid-3{ grid-template-columns:1fr; }
  :root{ --s6:3rem; }
}

.rounded{ border-radius:var(--r2);}


/* 4) Componentes (más consistentes entre sí) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.3rem;
  padding:.75rem 1.25rem;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:500;
  cursor:pointer;
  transition: transform .08s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  user-select:none;
}
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{
  outline:3px solid color-mix(in srgb, var(--coral) 35%, transparent);
  outline-offset:2px;
}

/* Primario: acción clara */
.btn--primary{
  background:var(--coral);
  color:var(--white);
}
.btn--primary:hover{
  filter: brightness(.96);
  border-color: color-mix(in srgb, var(--ink) 70%, transparent);
}

/* Secundario: minimal, pero con intención */
.btn--outline{
  background:transparent;
  color:var(--ink);
  border-color: color-mix(in srgb, var(--ink) 35%, transparent);
}
.btn--outline:hover{
  background: color-mix(in srgb, var(--coral) 10%, transparent);
  border-color: color-mix(in srgb, var(--coral) 35%, transparent);
}

/* Card: misma lógica que inputs/botones */
.card{
  background:var(--white);
  border:1px solid var(--stone);
  border-radius:var(--r2);
  padding:var(--s5);
}

/* Forms (más limpios, mismos criterios) */
.field{ display:grid; gap:.5rem; }
label{ font-weight:700; font-size:var(--small); }
.input,.textarea{
  width:100%;
  padding:.75rem 1rem;
  border-radius:var(--r1);
  border:1px solid var(--stone);
  background:var(--white);
  color:var(--ink);
}
.input:focus,.textarea:focus{
  outline:3px solid color-mix(in srgb, var(--coral) 18%, transparent);
  border-color: color-mix(in srgb, var(--coral) 40%, var(--stone));
}
.help{ font-size:var(--small); color: color-mix(in srgb, var(--ink) 60%, var(--muted)); }

/* Hero */
.hero{ display:grid; align-items:center; gap:var(--s6); }
.hero__kicker{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:var(--small);
  color:var(--muted);
  opacity:.9;
}
.hero__subtitle{ color:var(--muted); margin:var(--s2) 0 0;}


/*-----------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------*/
/* Navbar: más limpio y menos “efecto cristal” */
/**********************************************************/
/*.nav{
  position:sticky; top:0; z-index:100;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  border-bottom:1px solid var(--stone);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:.75rem 1rem;
  width:min(100% - 2rem, var(--container));
  margin-inline:auto;
}
.nav__menu{ display:flex; gap:var(--s4); }
.nav__link{ color: color-mix(in srgb, var(--ink) 75%, var(--muted)); font-weight:700; }
.nav__link:hover{ color: var(--coral); }
*/
/*********************************************************/
/* ============================
   NAVBAR — minimal editorial
   - Links sin fondo
   - Subrayado mínimo
   - CTA texto (no botón)
   - 2 estados con :has()
   ============================ */

/* Sticky container */
.nav{
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
}

.nav__sentinel{ height: 1px; }

/* Inner */
.nav__inner{
  height: var(--nav-h-top);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  padding: 0 1rem;

  /* Top: muy ligero */
  background: color-mix(in srgb, var(--cream) 55%, transparent);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: saturate(130%) blur(0px);

  transition:
    height .22s ease,
    background-color .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    backdrop-filter .22s ease;
}

/* Menú */
.nav__menu{
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.3vw, 1.35rem);
}

/* Links: sin fondo, editorial */
.nav__link{
  color: color-mix(in srgb, var(--ink) 78%, var(--muted));
  font-weight: 700;
  text-decoration: none;
  text-underline-offset: var(--u-offset);
  text-decoration-thickness: var(--u-thickness);
  text-decoration-color: transparent;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.nav__link:hover{
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--u-color);
}
.nav__link:focus-visible{
  outline: none;
  text-decoration: underline;
  text-decoration-color: var(--u-color);
}

/* CTA texto (más acción sin botón) */
.nav__cta{
  font-weight: 800;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: var(--u-thickness);
  text-underline-offset: var(--u-offset);
  text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent);
  transition: color .18s ease, text-decoration-color .18s ease, transform .18s ease;
  white-space: nowrap;
}
.nav__cta:hover{
  color: color-mix(in srgb, var(--coral) 88%, black);
  text-decoration-color: color-mix(in srgb, var(--coral) 70%, transparent);
  transform: translateY(-1px);
}
.nav__cta:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--coral) 18%, transparent);
  outline-offset: 3px;
  border-radius: 10px;
}

/* ============================
   Estado SCROLLED (sin JS)
   ============================ */
@supports selector(:has(*)){
  .nav:not(:has(.nav__sentinel:in-view)) .nav__inner{
    height: var(--nav-h-scroll);
    background: color-mix(in srgb, var(--cream) 92%, transparent);
    border-bottom-color: var(--nav-border);
    box-shadow: var(--nav-shadow);
    backdrop-filter: saturate(160%) blur(10px);
  }
}

/* Fallback: estado “scroll” siempre */
@supports not selector(:has(*)){
  .nav__inner{
    height: var(--nav-h-scroll);
    background: color-mix(in srgb, var(--cream) 92%, transparent);
    border-bottom-color: var(--nav-border);
    box-shadow: var(--nav-shadow);
    backdrop-filter: saturate(160%) blur(10px);
  }
}

/* Responsive */
@media (max-width: 720px){
  :root{ --nav-h-top: 70px; --nav-h-scroll: 60px; }
}

@media (max-width: 520px){
  .nav__menu a:nth-child(3){ display:none; } /* opcional */
}

/*-----------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------*/

/* Home hero: más minimal (menos capas) */
.home-hero{
  background:
    radial-gradient(1000px 420px at 8% -15%,
      color-mix(in srgb, var(--coral) 10%, transparent), transparent);
}

/* Footer (compacto) */
.footer{
  border-top:1px solid var(--coral);
  font-size:var(--small);
  line-height:1.4;
}
.footer__inner{
  width:min(100% - 2rem, var(--container));
  margin-inline:auto;
  padding:var(--s6) 1rem;
  color:var(--muted);
}