/* ==========================================================================
   Maquetas de webs de ejemplo (Inicio, Página web, Sistema completo)
   · Sensa · Medicina Estética: marca de ejemplo con identidad propia, distinta
     de Zalto. Una landing de centro médico premium, clara y con ritmo: portada
     enmarcada con la foto y el titular encima (velo verde petróleo), beneficios
     con íconos de línea, tratamientos en tarjetas de color, la médica,
     preguntas y una banda de cierre. Serif recta (Newsreader) para titulares,
     Jost para la interfaz; botones rectangulares; marfil, salvia, arena y
     verde petróleo.
   · Plantilla genérica: utilería didáctica del "antes". Exagera a propósito lo
     que el sistema de Zalto corrige (gradiente de plantilla, 4 botones, stock).
   Todo en em: el contenedor define el tamaño con font-size. Formato celular por
   defecto; formato escritorio cuando la maqueta mide 40em o más.
   ========================================================================== */

.ejemplo,
.generica {
  container-type: inline-size;
  width: 23em;
  min-height: 100%;
  overflow: hidden;
  line-height: 1.4;
  text-align: left;
}

.ejemplo img,
.generica img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Sensa · Medicina Estética ──────────────────────────────────────────── */
.ejemplo {
  --e-fondo: #F5F1EB;
  --e-fondo-2: #EAE3D9;
  --e-blanco: #FFFDFA;
  --e-tinta: #16302B;
  --e-tinta-2: #55645E;
  --e-acento: #1E4A42;
  --e-salvia: #C9D5CC;
  --e-arena: #E8D9C6;
  --e-dorado: #A9835A;
  --e-linea: rgb(22 48 43 / 0.12);
  --e-ui: "Jost", var(--fuente);
  container-name: ejemplo;
  display: flex;
  flex-direction: column;
  gap: 1.7em;
  padding: 0.7em 0.7em 0;
  background: var(--e-fondo);
  color: var(--e-tinta);
  font-family: var(--e-ui);
}

/* Ningún bloque se encoge aunque la maqueta tenga un alto fijo (imágenes OG) */
.ejemplo > * {
  flex-shrink: 0;
}

/* Rótulos de sección y titulares de la marca */
.ejemplo__seccion {
  font-size: 0.48em;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--e-dorado);
}

.ejemplo__h2 {
  margin-top: 0.4em;
  font-family: var(--fuente-serif);
  font-size: 1.45em;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ejemplo__n {
  font-size: 0.5em;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

/* ── Portada enmarcada: la foto, un velo verde petróleo y el titular encima ── */
.ejemplo__portada {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 30em;
  border-radius: 0.9em;
  overflow: hidden;
  background: var(--e-acento);
  color: var(--e-blanco);
}

.ejemplo__portada > img {
  position: absolute;
  inset: 0;
  object-position: 50% 40%;
}

/* La foto es clara (marfil y madera): el velo verde petróleo oscurece desde el
   centro hacia abajo, donde van el titular y el botón, y deja respirar la parte alta */
.ejemplo__portada::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(10 32 28 / 0.5) 0%, rgb(10 32 28 / 0) 20%, rgb(10 32 28 / 0.22) 38%, rgb(10 32 28 / 0.66) 60%, rgb(10 32 28 / 0.9) 100%);
}

.ejemplo__texto {
  text-shadow: 0 0.04em 0.6em rgb(10 32 28 / 0.35);
}

.ejemplo__nav,
.ejemplo__hero {
  position: relative;
  z-index: 1;
}

.ejemplo__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 1em 1.1em;
}

.ejemplo__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.74em;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  line-height: 1;
}

/* Isotipo: un anillo con un punto, la "sensación" en el centro */
.ejemplo__isotipo {
  position: relative;
  flex: none;
  width: 1.2em;
  height: 1.2em;
  border: 0.11em solid currentColor;
  border-radius: 50%;
}

.ejemplo__isotipo::after {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: currentColor;
}

.ejemplo__logo small {
  display: none;
  padding-left: 0.9em;
  border-left: 1px solid rgb(255 253 250 / 0.45);
  font-size: 0.66em;
  letter-spacing: 0.22em;
  opacity: 0.85;
}

.ejemplo__menu,
.ejemplo__cta-nav {
  display: none;
}

.ejemplo__hamburguesa {
  display: grid;
  gap: 0.3em;
  width: 1.4em;
}

.ejemplo__hamburguesa i {
  height: 1px;
  background: currentColor;
}

.ejemplo__hero {
  display: grid;
  gap: 1em;
  padding: 0 1.1em 1.2em;
}

.ejemplo__kicker {
  font-size: 0.48em;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.88;
}

.ejemplo__titulo {
  position: relative;
  margin-top: 0.4em;
  font-family: var(--fuente-serif);
  font-size: 2.05em;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.ejemplo__bajada {
  max-width: 26em;
  margin-top: 0.75em;
  font-size: 0.64em;
  line-height: 1.55;
  opacity: 0.88;
}

.ejemplo__acciones {
  display: grid;
  justify-items: start;
  gap: 0.75em;
  margin-top: 1.15em;
}

/* Botón rectangular, en mayúsculas espaciadas, con una flecha de trazo fino */
.ejemplo__boton {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4em;
  width: 100%;
  padding: 1.15em 1.35em;
  border-radius: 0.35em;
  background: var(--e-blanco);
  color: var(--e-tinta);
  font-size: 0.54em;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ejemplo__boton i {
  flex: none;
  width: 1.9em;
  height: 0.8em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12' fill='none' stroke='%2316302B' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h27M23 1.5 28 6l-5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ejemplo__whatsapp {
  padding-bottom: 0.15em;
  border-bottom: 1px solid rgb(255 253 250 / 0.55);
  font-size: 0.58em;
}

.ejemplo__ficha {
  display: none;
}

/* ── Beneficios ─────────────────────────────────────────────────────────── */
.ejemplo__beneficios {
  display: grid;
  gap: 0.85em;
  margin: 0 0.4em;
}

.ejemplo__beneficios li {
  display: flex;
  align-items: center;
  gap: 0.8em;
}

.ejemplo__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: var(--e-salvia);
  color: var(--e-acento);
}

.ejemplo__icono svg {
  width: 52%;
  height: 52%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ejemplo__beneficio {
  font-size: 0.56em;
  line-height: 1.4;
  color: var(--e-tinta-2);
}

.ejemplo__beneficio strong {
  display: block;
  font-size: 1.15em;
  font-weight: 500;
  color: var(--e-tinta);
}

/* ── Tratamientos en tarjetas de color ──────────────────────────────────── */
.ejemplo__tratamientos,
.ejemplo__dudas {
  position: relative;
  margin: 0 0.4em;
}

.ejemplo__cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 1em;
}

.ejemplo__ver {
  flex: none;
  padding-bottom: 0.2em;
  border-bottom: 1px solid currentColor;
  font-size: 0.52em;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--e-acento);
}

.ejemplo__tarjetas {
  display: grid;
  gap: 0.6em;
}

.ejemplo__tarjeta {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: space-between;
  gap: 1.6em;
  min-height: 8.5em;
  padding: 1em 1.1em 1.1em;
  border-radius: 0.8em;
  overflow: hidden;
}

/* Anillos de línea fina: el mismo trazo del isotipo, como detalle */
.ejemplo__tarjeta::before,
.ejemplo__tarjeta::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.22;
}

.ejemplo__tarjeta::before {
  top: -3.2em;
  right: -3.2em;
  width: 9em;
  height: 9em;
}

.ejemplo__tarjeta::after {
  top: -1.6em;
  right: -1.6em;
  width: 5.8em;
  height: 5.8em;
}

.ejemplo__tarjeta--1 {
  background: var(--e-acento);
  color: var(--e-blanco);
}

.ejemplo__tarjeta--2 {
  background: var(--e-salvia);
}

.ejemplo__tarjeta--3 {
  background: var(--e-arena);
}

.ejemplo__tarjeta .ejemplo__n {
  opacity: 0.7;
}

.ejemplo__tarjeta-titulo {
  font-family: var(--fuente-serif);
  font-size: 1.3em;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.ejemplo__tarjeta-texto {
  margin-top: 0.55em;
  font-size: 0.56em;
  line-height: 1.5;
  opacity: 0.82;
}

.ejemplo__tarjeta-pie {
  margin-top: 1em;
  font-size: 0.48em;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ── La médica ──────────────────────────────────────────────────────────── */
.ejemplo__equipo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: end;
  gap: 1em;
  margin: 0 0.4em;
}

.ejemplo__retrato {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 0.8em;
  overflow: hidden;
  background: var(--e-fondo-2);
}

.ejemplo__retrato img {
  position: absolute;
  inset: 0;
}

.ejemplo__retrato-pie {
  position: absolute;
  left: 0.5em;
  right: 0.5em;
  bottom: 0.5em;
  padding: 0.6em 0.75em;
  border-radius: 0.45em;
  background: rgb(255 253 250 / 0.92);
  font-size: 0.44em;
  line-height: 1.35;
  color: var(--e-tinta-2);
}

.ejemplo__retrato-pie strong {
  display: block;
  font-weight: 500;
  color: var(--e-tinta);
}

.ejemplo__equipo .ejemplo__h2 {
  font-size: 1.25em;
}

.ejemplo__parrafo {
  margin-top: 0.75em;
  font-size: 0.56em;
  line-height: 1.55;
  color: var(--e-tinta-2);
}

/* Dos datos breves bajo la médica (solo en formato escritorio) */
.ejemplo__datos {
  display: none;
}

/* ── Preguntas: lista numerada con filetes ──────────────────────────────── */
.ejemplo__lista-dudas {
  border-top: 1px solid var(--e-linea);
}

.ejemplo__duda {
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 0.6em;
  padding: 0.8em 0;
  border-bottom: 1px solid var(--e-linea);
}

.ejemplo__duda .ejemplo__n {
  color: var(--e-dorado);
}

.ejemplo__pregunta {
  font-family: var(--fuente-serif);
  font-size: 0.82em;
  line-height: 1.25;
}

.ejemplo__signo {
  font-size: 0.8em;
  color: var(--e-acento);
}

.ejemplo__respuesta {
  grid-column: 2 / 3;
  margin-top: 0.45em;
  font-size: 0.58em;
  line-height: 1.55;
  color: var(--e-tinta-2);
}

/* ── Cierre y pie ───────────────────────────────────────────────────────── */
.ejemplo__cierre {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: start;
  gap: 1.1em;
  padding: 1.6em 1.3em;
  border-radius: 0.9em;
  overflow: hidden;
  background: var(--e-acento);
  color: var(--e-blanco);
}

.ejemplo__cierre::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -4em;
  bottom: -5em;
  width: 13em;
  height: 13em;
  border: 1px solid rgb(255 253 250 / 0.2);
  border-radius: 50%;
  box-shadow: 0 0 0 2.2em rgb(255 253 250 / 0.04);
}

.ejemplo__cierre-titulo {
  font-family: var(--fuente-serif);
  font-size: 1.6em;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.ejemplo__cierre-texto {
  margin-top: 0.6em;
  font-size: 0.58em;
  opacity: 0.85;
}

.ejemplo__cierre .ejemplo__boton {
  width: auto;
}

.ejemplo__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em 1.4em;
  padding: 0.2em 0.4em 1.5em;
  font-size: 0.5em;
  color: var(--e-tinta-2);
}

.ejemplo__pie .ejemplo__logo {
  font-size: 1.2em;
  color: var(--e-tinta);
}

/* ── Formato escritorio ─────────────────────────────────────────────────── */
@container ejemplo (min-width: 40em) {
  .ejemplo {
    gap: 2.7em;
    padding: 1.1em 1.1em 0;
  }

  .ejemplo__portada {
    min-height: 26em;
    border-radius: 1.1em;
  }

  /* En escritorio el texto va a la izquierda: un segundo velo lo respalda ahí
     y deja la camilla, la planta y la ventana con su luz */
  .ejemplo__portada::after {
    background:
      linear-gradient(90deg, rgb(10 32 28 / 0.42) 0%, rgb(10 32 28 / 0.2) 42%, rgb(10 32 28 / 0) 68%),
      linear-gradient(180deg, rgb(10 32 28 / 0.5) 0%, rgb(10 32 28 / 0) 20%, rgb(10 32 28 / 0.18) 38%, rgb(10 32 28 / 0.6) 62%, rgb(10 32 28 / 0.88) 100%);
  }

  .ejemplo__nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding: 1.3em 1.7em;
  }

  .ejemplo__logo small {
    display: inline;
  }

  .ejemplo__menu {
    display: flex;
    gap: 2.2em;
    font-size: 0.54em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .ejemplo__cta-nav {
    display: inline-block;
    justify-self: end;
    padding: 0.85em 1.4em;
    border: 1px solid rgb(255 253 250 / 0.6);
    border-radius: 0.35em;
    font-size: 0.5em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .ejemplo__hamburguesa {
    display: none;
  }

  .ejemplo__hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3em;
    padding: 0 1.7em 1.8em;
  }

  .ejemplo__titulo {
    max-width: 12em;
    font-size: 3.15em;
  }

  .ejemplo__bajada {
    font-size: 0.76em;
  }

  .ejemplo__acciones {
    display: flex;
    align-items: center;
    gap: 1em 1.8em;
  }

  .ejemplo__boton {
    width: auto;
    font-size: 0.56em;
  }

  .ejemplo__ficha {
    display: grid;
    gap: 0.3em;
    min-width: 10.5em;
    padding: 1.1em 1.3em 1.2em;
    border-radius: 0.7em;
    background: rgb(255 253 250 / 0.94);
    color: var(--e-tinta);
  }

  .ejemplo__ficha-rotulo {
    font-size: 0.48em;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--e-tinta-2);
  }

  .ejemplo__ficha strong {
    font-family: var(--fuente-serif);
    font-size: 1.75em;
    font-weight: 400;
    line-height: 1.1;
  }

  .ejemplo__ficha span:last-child {
    font-size: 0.56em;
    color: var(--e-tinta-2);
  }

  .ejemplo__beneficios {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0 1.7em;
  }

  .ejemplo__beneficios li + li {
    padding-left: 1.6em;
    border-left: 1px solid var(--e-linea);
  }

  .ejemplo__beneficios li {
    padding-right: 1.2em;
  }

  .ejemplo__tratamientos,
  .ejemplo__dudas {
    margin: 0 1.7em;
  }

  .ejemplo__h2 {
    font-size: 1.95em;
  }

  .ejemplo__cabeza {
    margin-bottom: 1.3em;
  }

  .ejemplo__tarjetas {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.8em;
  }

  .ejemplo__tarjeta {
    min-height: 13em;
    padding: 1.3em 1.4em 1.4em;
  }

  .ejemplo__tarjeta-titulo {
    font-size: 1.55em;
  }

  .ejemplo__equipo {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 2.6em;
    margin: 0 1.7em;
  }

  .ejemplo__retrato {
    max-height: 20em;
  }

  .ejemplo__datos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4em;
    max-width: 22em;
    margin-top: 1.4em;
    padding-top: 1.1em;
    border-top: 1px solid var(--e-linea);
  }

  .ejemplo__datos dt {
    font-size: 0.46em;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--e-dorado);
  }

  .ejemplo__datos dd {
    margin-top: 0.35em;
    font-family: var(--fuente-serif);
    font-size: 0.86em;
  }

  .ejemplo__equipo .ejemplo__h2 {
    font-size: 1.95em;
  }

  .ejemplo__parrafo {
    max-width: 30em;
    font-size: 0.66em;
  }

  .ejemplo__dudas {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 2.6em;
  }

  .ejemplo__dudas .ejemplo__cabeza {
    align-items: flex-start;
  }

  .ejemplo__pregunta {
    font-size: 0.95em;
  }

  .ejemplo__respuesta {
    font-size: 0.62em;
  }

  .ejemplo__cierre {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin: 0 0.6em;
    padding: 2.2em 2.4em;
  }

  .ejemplo__cierre-titulo {
    font-size: 2.2em;
  }

  .ejemplo__pie {
    padding: 0.2em 2.3em 1.8em;
  }
}

/* ── Plantilla genérica del "antes" ─────────────────────────────────────── */
.generica {
  container-name: generica;
  background: #fff;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

.generica__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8em 1em;
  background: #1C1C6E;
  color: #fff;
  font-size: 0.7em;
  font-weight: 900;
}

.generica__tel {
  padding: 0.45em 0.9em;
  background: #FF2D87;
  border-radius: 2em;
  font-size: 0.85em;
  box-shadow: 0 0 0.8em #FF2D87;
}

.generica__hero {
  position: relative;
}

.generica__foto {
  position: relative;
  height: 15em;
}

/* Las caras están en la parte alta de la foto: el recorte las conserva */
.generica__foto img {
  object-position: 50% 12%;
}

.generica__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgb(124 58 237 / 0.82), rgb(6 182 212 / 0.72));
}

.generica__texto {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1em;
  color: #fff;
  text-align: center;
}

.generica__titulo {
  position: relative;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 1.2em;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 0.1em 0.5em rgb(0 0 0 / 0.4);
}

.generica__bajada {
  margin-top: 0.5em;
  font-size: 0.6em;
}

.generica__botones {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em;
  margin-top: 0.8em;
}

.generica__b {
  position: relative;
  padding: 0.65em 0.9em;
  border-radius: 2em;
  color: #fff;
  font-size: 0.5em;
  font-weight: 800;
  box-shadow: 0 0 1em rgb(255 255 255 / 0.55);
}

.generica__b--1 {
  background: #FF2D87;
}

.generica__b--2 {
  background: #22C55E;
}

.generica__b--3 {
  background: linear-gradient(90deg, #F58529, #DD2A7B, #8134AF);
}

.generica__b--4 {
  background: #F59E0B;
}

.generica__servicios {
  padding: 1.2em 1em;
  color: #1C1C6E;
  font-size: 0.75em;
  font-weight: 900;
  text-align: center;
}

.generica__iconos {
  display: flex;
  justify-content: center;
  gap: 0.7em;
  margin-top: 0.8em;
}

.generica__iconos span {
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: linear-gradient(135deg, #A78BFA, #22D3EE);
}

@container generica (min-width: 40em) {
  .generica__nav {
    padding: 1em 2.2em;
    font-size: 0.8em;
  }

  .generica__foto {
    height: 22em;
  }

  .generica__titulo {
    font-size: 2.3em;
  }

  .generica__bajada {
    font-size: 0.85em;
  }

  .generica__b {
    font-size: 0.66em;
  }

  .generica__servicios {
    font-size: 0.95em;
  }
}