/* ===================================================================
   MONACO CLINICS · BASE · BOTONES · SLOTS DE MATERIAL
   =================================================================== */

/* ===================================================================
   2. BASE
   =================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--mc-bg);color:var(--mc-ink);
  font-family:var(--mc-font-body);font-size:var(--mc-step-0);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--mc-font-display);font-weight:400;line-height:1.02;letter-spacing:-.03em;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--mc-arena);outline-offset:3px;border-radius:2px}
::selection{background:var(--mc-arena);color:var(--mc-black)}

.mc-wrap{width:100%;max-width:var(--mc-max);margin-inline:auto;padding-inline:var(--mc-gutter)}
.mc-section{padding-block:var(--mc-section);position:relative}

/* Marcador editorial de sección: número + línea */
.mc-mark{display:flex;align-items:center;gap:1rem;margin-bottom:2.2rem}
.mc-mark__n{font-family:var(--mc-font-display);font-size:var(--mc-step--2);letter-spacing:.2em;color:var(--mc-arena-deep)}
.mc-mark__t{font-size:var(--mc-step--2);letter-spacing:.24em;text-transform:uppercase;color:var(--mc-ink-soft)}
.mc-mark__l{flex:1;height:1px;background:var(--mc-line)}
.mc-dark .mc-mark__n,.mc-deep .mc-mark__n{color:var(--mc-arena)}
.mc-dark .mc-mark__t,.mc-deep .mc-mark__t{color:rgba(243,241,237,.55)}
.mc-dark .mc-mark__l,.mc-deep .mc-mark__l{background:var(--mc-line-invert)}

.mc-lede{font-size:var(--mc-step-1);line-height:1.45;color:var(--mc-ink-soft);max-width:56ch;letter-spacing:-.01em}
.mc-dark{background:var(--mc-black);color:var(--mc-ink-invert)}
.mc-dark .mc-lede{color:rgba(243,241,237,.7)}
.mc-deep{background:var(--mc-verde);color:var(--mc-ink-invert)}
.mc-deep .mc-lede{color:rgba(243,241,237,.74)}
.mc-soft{background:var(--mc-bg-soft)}

/* Textura de grano: da profundidad sin imágenes. ~1 KB, generada en SVG. */
.mc-grain{position:relative;isolation:isolate}
.mc-grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.5;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}
.mc-grain>*{position:relative;z-index:2}

/* ===================================================================
   3. BOTONES
   =================================================================== */
.mc-btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:1.1rem 2.1rem;border:1px solid transparent;border-radius:var(--mc-radius);
  font-size:var(--mc-step--1);letter-spacing:.11em;text-transform:uppercase;font-weight:500;
  text-decoration:none;min-height:54px;
  transition:color .4s var(--mc-ease),border-color .4s var(--mc-ease);
}
.mc-btn>span{position:relative;z-index:2}
/* La etiqueta corta solo aparece donde el CSS de la cabecera la enciende */
.mc-btn__short{display:none}
.mc-btn::before{
  content:"";position:absolute;inset:0;z-index:1;transform:translateY(101%);
  transition:transform .5s var(--mc-ease-out);
}
.mc-btn:hover::before{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.mc-btn::before{transition:none}}

.mc-btn--primary{background:var(--mc-arena);color:var(--mc-black);border-color:var(--mc-arena)}
.mc-btn--primary::before{background:var(--mc-black)}
.mc-btn--primary:hover{color:var(--mc-crema);border-color:var(--mc-black)}

.mc-btn--ghost{background:transparent;color:currentColor;border-color:currentColor}
.mc-btn--ghost::before{background:var(--mc-crema)}
.mc-btn--ghost:hover{color:var(--mc-black);border-color:var(--mc-crema)}
.mc-btn--ghost-dark::before{background:var(--mc-black)}
.mc-btn--ghost-dark:hover{color:var(--mc-crema);border-color:var(--mc-black)}

/* Flecha que se desplaza al hover */
.mc-btn svg{transition:transform .4s var(--mc-ease-out)}
.mc-btn:hover svg{transform:translateX(4px)}

/* ===================================================================
   4. HUECOS DE MATERIAL REAL (slots)
   =================================================================== */
.slot{
  position:relative;display:grid;place-items:center;overflow:hidden;
  background:
    repeating-linear-gradient(135deg,rgba(183,160,139,.12) 0 14px,transparent 14px 28px),
    linear-gradient(160deg,#E4DFD7,#CFC8BE);
  border:1px dashed rgba(9,12,12,.2);color:#6B6259;
}
.mc-dark .slot,.mc-deep .slot{
  background:
    repeating-linear-gradient(135deg,rgba(183,160,139,.16) 0 14px,transparent 14px 28px),
    rgba(243,241,237,.05);
  border-color:rgba(243,241,237,.26);color:rgba(243,241,237,.72);
}
.slot::after{
  content:attr(data-slot);position:absolute;inset:auto 0 0 0;padding:.65rem .85rem;
  font-size:.66rem;letter-spacing:.05em;line-height:1.45;text-transform:uppercase;
  background:rgba(9,12,12,.84);color:var(--mc-crema);text-align:left;
}
.slot--hero{aspect-ratio:3/4;height:100%}
.slot--wide{aspect-ratio:16/9}
.slot--square{aspect-ratio:1/1}
.slot--portrait{aspect-ratio:3/4}


/* -------------------------------------------------------------------
   Imagenes reales (.mc-media)
   Sustituyen a los .slot conforme llega el material. Conservan la misma
   proporcion que el hueco al que reemplazan para que el layout no salte,
   y llevan object-fit:cover porque las fotos vienen en proporciones
   distintas de las del diseno.
   Todas las <img> deben llevar width/height: sin ellos el navegador no
   reserva el espacio y la pagina da saltos al cargar (CLS).
   ------------------------------------------------------------------- */
.mc-media{display:block;width:100%;height:auto;object-fit:cover;background:rgba(9,12,12,.06)}
.mc-media--hero{height:100%;aspect-ratio:3/4}
.mc-media--portrait{aspect-ratio:3/4}
.mc-media--square{aspect-ratio:1/1}