:root{
  --bg:#F7FBFC;
  --paper:#FFFFFF;
  --ink:#0B2E2F;
  --muted:#466366;
  --brand:#0E7C86;
  --brand-2:#A0D6D9;
  --accent:#F0CFCF;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.07);
  --max:1100px;

  /* Tipografía fluida */
  --step--1: clamp(.9rem, .86rem + .2vw, 1rem);
  --step-0: clamp(1rem, .95rem + .5vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + 1vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.2rem + 2vw, 2rem);
  --step-3: clamp(2rem, 1.5rem + 3vw, 2.8rem);
}
*{box-sizing:border-box}
html,body{position:relative; z-index:-1; position:relative; z-index:-1; height:100%}
body{position:relative; z-index:-1; position:relative; z-index:-1; 
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:transparent;
  line-height:1.6;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:min(100% - 2rem, var(--max));margin-inline:auto}
.section{padding: clamp(2rem, 3vw, 4rem) 0}
.section.alt{background: transparent}
.grid-2{display:grid;gap:1.2rem;grid-template-columns:1fr}
.grid-3{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media (min-width:800px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}

.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden
}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#fff;padding:.5rem 1rem;border-radius:8px;box-shadow:var(--shadow)}

.site-header{
  position:sticky;top:0;background:rgba(255,255,255,.8);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #e8f1f2;z-index:50
}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--ink)}
.brand__text{white-space:nowrap}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.site-nav .menu{display:none;gap:1rem;list-style:none;margin:0;padding:0}
.site-nav .menu a{padding:.4rem .6rem;border-radius:8px}
.site-nav .menu a:hover{background:rgba(14,124,134,.08);text-decoration:none}
.nav-toggle{border:1px solid #cfe7ea;background:#fff;border-radius:10px;padding:.5rem .7rem}
@media (min-width:840px){
  .nav-toggle{display:none}
  .site-nav .menu{display:flex}
}

.hero{
  padding: clamp(3rem, 6vw, 7rem) 0;
  background: radial-gradient(1200px 400px at 50% -200px, rgba(221,243,244,.7) 0, transparent 70%);
}
.hero h1{font-size:var(--step-3);line-height:1.1;margin:0 0 .6rem}
.lead{font-size:var(--step-0);max-width:90%;color:var(--muted)}
.hero__cta{display:flex;gap:.8rem;margin-top:1rem;flex-wrap:wrap}
.badges{display:flex;gap:.6rem;list-style:none;padding:0;margin:1rem 0 0;color:var(--muted);flex-wrap:wrap}
.br-md{display:none}
@media (min-width:720px){.br-md{display:inline}}

.cta, .ghost, .cta--small{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;padding:.8rem 1.1rem;font-weight:600;border:2px solid transparent
}
.cta{background:var(--brand);color:#fff}
.cta:hover{filter:brightness(.95);text-decoration:none}
.ghost{background:#fff;border-color:#cfe7ea;color:var(--ink)}
.cta--small{background:transparent;border-color:transparent;padding:.4rem .7rem}

.card{
  background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);
  padding: clamp(1rem, 2vw, 1.5rem)
}
.media{display:flex;align-items:center;justify-content:center}

.feature h3{margin:.2rem 0}
.list-check{padding-left:1.2rem}
.list-check li{margin:.4rem 0}
.note{font-size:var(--step--1);color:var(--muted)}
.muted{color:var(--muted)}
.sm{font-size:var(--step--1)}

.steps{padding-left:1.2rem}
.pill-list{display:flex;gap:.5rem;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.pill-list li{background:#e6f3f4;border:1px solid #cfe7ea;border-radius:999px;padding:.4rem .7rem}

.faq{background:#fff;border:1px solid #e6f3f4;border-radius:12px;padding:.8rem;margin:.6rem 0}
.faq summary{cursor:pointer;font-weight:600}
.faq[open]{border-color:#cfe7ea}

.form{display:grid;gap:.8rem}
.field{display:grid;gap:.3rem}
.field input,.field textarea{
  width:100%;padding:.8rem;border:1.5px solid #cfe0e2;border-radius:10px;background:#fff
}
.field input:focus,.field textarea:focus{outline:3px solid #a8dfe3;border-color:#7bc3c9}
.field.check{grid-auto-flow:column;grid-template-columns:auto 1fr;align-items:start;gap:.5rem}
.error{color:#9c2b2b;min-height:1rem}
.form-status{margin:.6rem 0}
.list-rows{list-style:none;padding:0;margin:0}
.list-rows li{display:flex;justify-content:space-between;border-bottom:1px dashed #e5eef0;padding:.4rem 0}
.notice{background:#fff7f7;border:1px solid #ffe2e2;border-radius:10px;padding:.8rem;margin-top:1rem}

.floating-cta{
  position:fixed;right:1rem;bottom:1rem;z-index:999;
  background:var(--brand);color:#fff;border-radius:999px;padding:.9rem 1.1rem;box-shadow:var(--shadow)
}
.floating-cta:hover{text-decoration:none;filter:brightness(.95)}

.site-footer{padding:2rem 0;border-top:1px solid #e8f1f2;background:#fff;margin-top:2rem}
.site-footer .wrap{display:flex;gap:1rem;justify-content:space-between;align-items:center;flex-wrap:wrap}
.site-footer nav a{margin-right:.8rem;color:var(--muted)}
.site-footer nav a[aria-disabled="true"]{pointer-events:none;opacity:.5}

@media (prefers-reduced-motion: no-preference){
  .cta, .ghost, .floating-cta{transition: filter .2s ease, transform .2s ease}
  .cta:active,.ghost:active,.floating-cta:active{transform: translateY(1px)}
}


/* Calidez: pequeña cita bajo el hero */
.quote{
  margin-top:.8rem;
  padding-left:.8rem;
  border-left:3px solid var(--brand-2);
  color:var(--muted);
  font-style:italic;
}

/* Menú móvil en panel */
.site-nav{position:relative}
@media (max-width:839px){
  .site-nav .menu{
    position:absolute;
    right:0; top:3.1rem;
    display:none; flex-direction:column; gap:.2rem;
    background:#fff; border:1px solid #e6f3f4; border-radius:12px;
    padding:.6rem; box-shadow: var(--shadow); width:min(92vw, 360px);
  }
  .site-nav .menu a{padding:.6rem .8rem}
  .site-nav .menu.show{display:flex}
}
/* Alinear items en desktop y evitar salto de baseline */
@media (min-width:840px){
  .site-nav .menu{align-items:center}
  .site-nav .menu li{display:flex; align-items:center}
  .site-nav .menu a{display:flex; align-items:center}
}

/* Evitar scroll horizontal en mobile por CTA flotante */
html, body{position:relative; z-index:-1; position:relative; z-index:-1; overflow-x:hidden}
.floating-cta{max-width:calc(100vw - 2rem); white-space:nowrap}


/* ===== Mini-calendario — layout responsive en cuadrícula ===== */
.mini-cal{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)); /* 7 columnas por defecto */
  gap:.4rem;
  margin-top:.8rem;
}

.mini-cal .day{
  background:#fff;
  border:1px solid #e6f3f4;
  border-radius:10px;
  /* celdas cuadradas y centradas */
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: var(--step--1);
  line-height:1;
  padding:.4rem;         /* pequeño, no influye por aspect-ratio */
}

/* Encabezados (L M X J V S D) como chips ligeros, sin fondo ni borde */
.mini-cal .muted{
  background: transparent;
  border: 0;
  color:#8aa2a6;
  font-weight:600;
  aspect-ratio:auto;     /* no obligamos cuadrado para la fila de letras */
  padding:.2rem .3rem;
}

/* Disponibles: borde y foco suave */
.mini-cal .available{
  outline:2px solid #a8dfe3;
  outline-offset:-1px;
}

/* Hover/active opcional en desktop */
@media (hover:hover){
  .mini-cal .available:hover{ outline-color:#7bc3c9; }
}

.mini-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .4rem;
}



/* ===== Fondo cromático "respira" — FIX cobertura + paleta ===== */

/* === Fondo cromático "respira" (versión continua y sin bordes) === */
:root {
  /* paleta más profunda pero calma */
  --tone-a:#d4efee;  /* aqua suave */
  --tone-b:#d5f1e4;  /* menta */
  --tone-c:#eaf3d6;  /* verde amarillento pastel */
  --tone-d:#d9e9ff;  /* celeste */
  --tone-e:#e3dcff;  /* lavanda */
}

/* Fondo global en html, cubre todo el viewport */
html {
  background: var(--tone-a);
  animation: breathe-bg 60s ease-in-out infinite alternate;
}

/* Transición cromática progresiva, sin gradientes visibles */
@keyframes breathe-bg {
  0%   { background-color: var(--tone-a); }
  25%  { background-color: var(--tone-b); }
  50%  { background-color: var(--tone-c); }
  75%  { background-color: var(--tone-d); }
  100% { background-color: var(--tone-e); }
}

/* y en la animación: */



/* Respeto a reduced motion */
@media (prefers-reduced-motion: reduce){
  html { animation: none; }
}


/* Respeto por usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce){
  html::before, html::after{ animation: none; }
}