/* ==========================================================================
   Mis Dulces Sueños — components.css
   Piezas reutilizables. Regla de la casa: ninguna tarjeta lleva a la vez
   borde, sombra y relleno. Separan el filete, el campo de color o el arco.
   ========================================================================== */

:root { --c-crema-vivo: #FDFAF5; }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .85rem 1.55rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--f-texto);
  font-size: var(--t-pq);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s var(--salida), color .25s var(--salida),
              border-color .25s var(--salida), transform .25s var(--salida),
              box-shadow .25s var(--salida);
}
.btn__ico {
  flex: none; width: 19px; height: 19px;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

.btn--azul { background: var(--c-azul-fuerte); color: var(--c-crema-vivo); }
.btn--azul:hover {
  background: var(--c-azul-hondo);
  transform: translateY(-2px);
  box-shadow: var(--sombra-alta);
}
.btn--azul:active { transform: translateY(0); box-shadow: var(--sombra-suave); }

.btn--linea { background: transparent; border-color: var(--c-azul-fuerte); color: var(--c-azul-fuerte); }
.btn--linea:hover {
  background: var(--c-azul-fuerte);
  border-color: var(--c-azul-fuerte);
  color: var(--c-crema-vivo);
  transform: translateY(-2px);
}
/* La flecha avanza un poco al pasar el ratón, en cualquier variante */
.btn .btn__ico:has(use[href="#i-flecha"]) { transition: transform .25s var(--salida); }
.btn:hover .btn__ico:has(use[href="#i-flecha"]) { transform: translateX(3px); }

.btn--gr { padding: 1.05rem 2.1rem; font-size: 1.0625rem; }
.btn--pq { padding: .58rem 1.1rem; font-size: var(--t-mini); }

/* --------------------------------------------------------------------------
   Listas con icono de trazo fino
   -------------------------------------------------------------------------- */
.lista-ico li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: .9rem;
  align-items: start;
  padding-block: .7rem;
  max-width: 58ch;
  color: var(--c-marron-suave);
}
.lista-ico svg {
  width: 19px; height: 19px;
  margin-top: .3em;
  fill: none; stroke: var(--c-azul-fuerte);
  stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Consulta (servicio de entrada)
   -------------------------------------------------------------------------- */
.consulta {
  display: grid;
  gap: clamp(var(--e5), 3.5vw, var(--e7));
  padding: clamp(var(--e5), 3.5vw, var(--e7));
  background: var(--c-crema-vivo);
  border: var(--filete);
  border-radius: var(--r-gr);
}
@media (min-width: 48em) {
  .consulta { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); }
}
.consulta__cab, .consulta__cuerpo, .plan__cab, .plan__cuerpo { min-width: 0; }
.consulta__cab { display: flex; flex-direction: column; gap: var(--e4); }
.consulta__cuerpo p { color: var(--c-marron-suave); }
.consulta__cuerpo .plomo { color: var(--c-marron); }
/* El botón, al final de la columna izquierda (igual que en los planes) */
.consulta__cab .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 55.99em) { .consulta__cab .btn { margin-top: var(--e3); } }

.ficha {
  display: grid; gap: .55rem;
  margin: var(--e2) 0 0;
  padding: var(--e4) 0 0;
  border-top: var(--filete);
}
.ficha > div { display: flex; flex-direction: column; gap: .1rem; font-size: var(--t-pq); }
.ficha dt { font-weight: 700; color: var(--c-marron); }
.ficha dt::after { content: ":"; }
.ficha dd { color: var(--c-marron-suave); }

/* --------------------------------------------------------------------------
   Planes: tarjetas horizontales, una encima de otra.
   Cada tarjeta tiene dos columnas: a la izquierda nombre, precio y botón
   (.plan__cab) y a la derecha lo que incluye (.plan__cuerpo).
   -------------------------------------------------------------------------- */
.planes { display: grid; gap: var(--e5); }

.plan {
  display: grid;
  min-width: 0;
  gap: var(--e5);
  padding: clamp(var(--e5), 3.5vw, var(--e7));
  background: var(--c-crema-vivo);
  border: var(--filete);
  border-radius: var(--r-gr);
}
@media (min-width: 48em) {
  .plan { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); column-gap: clamp(var(--e6), 4vw, var(--e8)); }
}
.plan--destacado {
  background: var(--c-azul-tenue);
  border: 1.5px solid var(--c-azul-fuerte);
  box-shadow: var(--sombra-suave);
}

/* Columna izquierda: en vertical, con el botón empujado al final */
.plan__cab { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e4); }
.plan__cab .btn { margin-top: auto; }
@media (max-width: 55.99em) { .plan__cab .btn { margin-top: var(--e3); } }

/* Columna derecha */
.plan__cuerpo { display: flex; flex-direction: column; gap: var(--e4); }

.plan__nom {
  font-size: clamp(1.25rem, 1.85vw, 1.5rem);
  line-height: 1.22;
}
.plan .precio { margin-top: -.15rem; }
.plan__marca {
  margin: -.35rem 0 0;
  font-size: var(--t-pq);
  font-weight: 700;
  color: var(--c-azul-fuerte);
}
.plan__res { font-size: var(--t-pq); color: var(--c-marron-suave); margin: 0; max-width: 62ch; }
.plan__inc { font-size: var(--t-pq); font-weight: 700; color: var(--c-marron); margin: 0; }

.plan__lista { display: grid; gap: .5rem; margin: 0; }
/* Si la lista es larga, en pantallas anchas se reparte en dos columnas */
@media (min-width: 68em) {
  .plan__lista:has(li:nth-child(6)) { grid-template-columns: 1fr 1fr; column-gap: var(--e6); }
}
.plan__lista li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--t-pq);
  line-height: 1.5;
  color: var(--c-marron-suave);
}
.plan__lista li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-azul);
}
.plan__lista strong { font-weight: 700; color: var(--c-marron); }  /* lo destacado, un tono más oscuro */
.plan .btn { padding-inline: 1.4rem; text-wrap: balance; }  /* envuelve en dos líneas antes que desbordar */

.aclaracion {
  margin: clamp(var(--e7), 5vw, var(--e8)) auto 0;
  padding: clamp(var(--e4), 2.4vw, var(--e5)) clamp(var(--e4), 3vw, var(--e6));
  max-width: 58ch;
  background: color-mix(in srgb, var(--c-beige) 40%, var(--c-fondo));
  border-radius: var(--r-md);
  font-size: var(--t-pq);
  line-height: 1.6;
  color: var(--c-marron-suave);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Cómo trabajamos: a la izquierda el título con una foto debajo,
   a la derecha los pasos en lista. Es una secuencia real, así que el
   número sí aporta información.
   -------------------------------------------------------------------------- */
.proceso__rejilla { display: grid; gap: var(--sep-bloque); }
@media (min-width: 62em) {
  .proceso__rejilla {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(var(--e7), 6vw, var(--e9));
    align-items: start;
  }
}
.proceso__cab h2 { max-width: 18ch; }

.proceso__foto { margin-top: var(--sep-titulo); }
.proceso__foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 55% 45%;
  border-radius: var(--r-gr);
  filter: saturate(.82);
}
@media (max-width: 61.99em) {
  .proceso__foto img { aspect-ratio: 16 / 10; }
}
@media (min-width: 46em) and (max-width: 61.99em) {
  .proceso__foto { max-width: 460px; margin-inline: auto; }   /* el original mide 474px de ancho */
}

.pasos { display: grid; }
.paso {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  column-gap: clamp(var(--e4), 2.5vw, var(--e6));
  padding-block: clamp(1.4rem, 2.6vw, 2rem);
  border-top: var(--filete);
}
.paso:first-child { border-top: 0; }   /* solo líneas entre pasos, no arriba ni abajo */
.paso__n {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1;
  /* --c-azul es decorativo: como texto da 2.77:1 sobre el fondo y aquí el
     número sí es texto. Mismo tono (201°), oscurecido hasta 5.9:1. */
  color: var(--c-azul-fuerte);
  font-variant-numeric: lining-nums;
}
.paso__t { font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.3; margin-bottom: .4rem; }
.paso p { font-size: var(--t-pq); color: var(--c-marron-suave); max-width: 50ch; }

/* --------------------------------------------------------------------------
   Pilares: cada uno con un icono de trazo fino que representa su mensaje.
   Es el único adorno de la sección; el texto va a tamaño normal.
   -------------------------------------------------------------------------- */
.pilares h3 { text-align: center; }
.pilares__lista { display: grid; gap: var(--e6); }
@media (min-width: 62em) {
  .pilares__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e5); }
}
.pilares__lista li {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--e4);
  text-align: center;
  color: var(--c-marron);
}
.pilares__lista span { max-width: 18ch; }
.pilar__ico {
  width: 30px; height: 30px;
  fill: none; stroke: var(--c-azul-fuerte);
  stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Qué nos diferencia: sin rejilla de filetes, solo tipografía y aire
   -------------------------------------------------------------------------- */
.difer { display: grid; gap: clamp(var(--e6), 4vw, var(--e7)) clamp(var(--e6), 6vw, var(--e9)); }
@media (min-width: 46em) { .difer { grid-template-columns: 1fr 1fr; } }
.difer dt {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.25;
  color: var(--c-marron);
  margin-bottom: .45rem;
}
.difer dd { color: var(--c-marron-suave); font-size: var(--t-pq); max-width: 44ch; }

/* --------------------------------------------------------------------------
   Frase destacada
   -------------------------------------------------------------------------- */
.frase__cita p {
  font-family: var(--f-display);
  font-size: clamp(1.65rem, 4.1vw, 3.05rem);
  line-height: 1.17;
  letter-spacing: -0.014em;
  color: var(--c-marron);
  margin-inline: auto;
  max-width: 21ch;
  text-wrap: balance;
}
.frase__cita footer {
  margin-top: clamp(var(--e5), 3vw, var(--e6));
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: .07em;
  color: var(--c-marron-suave);
}
.frase__cita footer::before { content: "— "; }

/* --------------------------------------------------------------------------
   Testimonios
   -------------------------------------------------------------------------- */
/* Carrusel: una tarjeta cada vez. La pista es una fila que se desplaza en
   horizontal; scroll-snap hace que siempre se detenga en una tarjeta entera,
   y eso es lo que permite deslizar con el dedo sin JS. */
.carrusel { max-width: 860px; margin-inline: auto; }
.carrusel__pista {
  display: flex;
  align-items: flex-start;        /* cada testimonio empieza arriba; las flechas no se mueven */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;            /* sin barra de desplazamiento visible */
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista:focus-visible { outline: 2px solid var(--c-azul); outline-offset: 6px; border-radius: var(--r-md); }

.testi__it {
  flex: 0 0 100%;                   /* cada tarjeta ocupa todo el ancho: se ve solo una */
  scroll-snap-align: center;
  padding-inline: clamp(var(--e2), 4vw, var(--e7));
  text-align: center;
}
.testi__cita p {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.5;
  color: var(--c-marron);
  max-width: 46ch;
  margin-inline: auto;
  text-wrap: pretty;
}
.testi__valora { margin-top: var(--e6); }
.testi__valora h3 {
  font-family: var(--f-texto);
  font-size: var(--t-pq);
  font-weight: 700;
  color: var(--c-azul-fuerte);
  margin-bottom: .35rem;
}
.testi__valora p { font-size: var(--t-pq); color: var(--c-marron-suave); max-width: 52ch; margin-inline: auto; }
.testi__quien { margin: var(--e5) auto 0; font-weight: 700; color: var(--c-marron); }
.testi__quien span { display: block; font-weight: 400; font-size: var(--t-pq); color: var(--c-marron-suave); }

/* Flechas y contador */
.carrusel__mandos {
  display: flex; align-items: center; justify-content: center;
  gap: var(--e5);
  margin-top: var(--e7);
}
.carrusel__flecha {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--c-azul-fuerte) 45%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--c-azul-fuerte);
  cursor: pointer;
  transition: background-color .25s var(--salida), border-color .25s var(--salida);
}
.carrusel__flecha:hover:not(:disabled) { background: var(--c-azul-tenue); border-color: var(--c-azul-fuerte); }
.carrusel__flecha:disabled { opacity: .35; cursor: default; }
.carrusel__flecha svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.carrusel__flecha--ant svg { transform: scaleX(-1); }   /* la misma flecha, girada */
.carrusel__cuenta {
  margin: 0; min-width: 3.5em; text-align: center;
  font-size: var(--t-pq); color: var(--c-marron-suave);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Lumi
   -------------------------------------------------------------------------- */
/* Solo la cesta, a buen tamaño */
.lumi__foto { width: min(100%, 460px); margin-inline: auto; }
.lumi__foto img { width: 100%; border-radius: var(--r-gr); }

/* --------------------------------------------------------------------------
   Acordeón de preguntas frecuentes
   -------------------------------------------------------------------------- */
.acor { border-bottom: var(--filete); }
.acor:first-child { border-top: var(--filete); }

.acor summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e5);
  padding-block: clamp(var(--e4), 2vw, 1.35rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.3;
  color: var(--c-marron);
  transition: color .2s var(--salida);
}
.acor summary::-webkit-details-marker { display: none; }
.acor summary:hover { color: var(--c-azul-fuerte); }
.acor summary:focus-visible { outline-offset: -2px; }
.acor summary svg {
  flex: none; width: 22px; height: 22px;
  fill: none; stroke: var(--c-azul-fuerte);
  stroke-width: 1.4; stroke-linecap: round;
  transition: transform .35s var(--salida);
}
.acor[open] summary svg { transform: rotate(135deg); }

.acor__cuerpo { padding-bottom: clamp(var(--e4), 2vw, 1.4rem); }
.acor__cuerpo p { color: var(--c-marron-suave); max-width: 64ch; }

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .acor::details-content {
    block-size: 0;
    overflow: hidden;
    content-visibility: hidden;
    transition: block-size .4s var(--salida), content-visibility .4s allow-discrete;
  }
  .acor[open]::details-content { block-size: auto; content-visibility: visible; }
}