/* Secciones tras el hero (Figma «Secciones» 92:3333, aprobado el 14-10): texto a la izquierda y,
   a la derecha, una pieza que explica la sección (regla de Fernando: nada de mitad derecha vacía).
   Rejilla = la del hero aprobado (55 · 5 · 40 desde 1280; 50 · 5 · 45 entre 1024 y 1279), texto y
   pieza alineados arriba; por debajo de 1024, la pieza baja debajo del texto (máx. 560 entre 600 y
   1023). Piezas en template-parts/secciones/ y componentes/calculadora-planes.php; movimiento en
   assets/js/secciones.js (solo al entrar, una vez; sin JS o con «reducir movimiento», estado final).
   Solo variables de tokens.css (sin colores sueltos: tests/SeccionesTest.php). Prefijo «sec-». */

/* ---------- Rejilla ---------- */
.sec-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); align-items: start; }
.sec-rejilla__texto, .sec-rejilla__pieza { min-width: 0; }
.sec-rejilla__pieza { width: 100%; }
.sec-rejilla__texto > .pag-seccion__cabeza:last-child { margin-bottom: 0; }
/* Sin viudas en el texto de la sección ni en las piezas. */
.sec-rejilla__texto, .sec-pieza, .sec-sms, .sec-vueltas-pieza { text-wrap: pretty; }
@media (min-width: 600px) and (max-width: 899px) { .sec-rejilla__pieza { max-width: 560px; } }
/* Desde 900 ya a dos columnas (regla de Fernando medida a 1000: nada de derecha vacía); la pieza,
   a ~435 px, cabe entera (calculadora, factura, línea de tiempo medidas a 1000). */
@media (min-width: 900px) {
	.sec-rejilla { grid-template-columns: 50% 45%; column-gap: 5%; }
}
@media (min-width: 1024px) {
	/* Columna de texto más alta que la pieza (get-started): la pieza acompaña al leer. */
	.sec-rejilla--fija .sec-rejilla__pieza { position: sticky; top: var(--sp-96); }
}
@media (min-width: 1280px) { .sec-rejilla { grid-template-columns: 55% 40%; } }
/* Precio: el bloque compartido .pag-precio llena su columna (en la rejilla ya no manda 65ch). */
.sec-rejilla .pag-precio { max-width: var(--measure); }

/* Cifra de oficio en la columna de texto (antes, columna propia a la izquierda): sigue a la vista. */
.sec-oficio { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-8) var(--sp-16); margin-bottom: var(--sp-24); }
.sec-oficio .pag-oficio__numero { font-size: var(--fs-69); }
.sec-oficio .mono-etiqueta { color: var(--arg-on-dark-weak); white-space: nowrap; }
.seccion--crema .sec-oficio .pag-oficio__numero, .seccion--blanca .sec-oficio .pag-oficio__numero { color: var(--arg-leaf); }
.seccion--crema .sec-oficio .mono-etiqueta, .seccion--blanca .sec-oficio .mono-etiqueta { color: var(--arg-text-weak); }
.sec-rejilla .pag-oficio__copia h2 { margin-bottom: var(--sp-16); }

/* ---------- Pieza: tarjeta común ---------- */
.sec-pieza {
	margin: 0; padding: var(--sp-24) var(--sp-16);
	border: 1px solid var(--arg-border); border-radius: var(--radius-lg);
	background: var(--arg-surface-card); color: var(--arg-text); box-shadow: var(--shadow-card);
	font-size: var(--fs-16); line-height: 1.45;
}
@media (min-width: 600px) { .sec-pieza { padding: var(--sp-24); } }
.sec-pieza .mono-etiqueta { font-size: var(--fs-12); color: var(--arg-neutral-600); }
.sec-pieza__cabeza {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-4) var(--sp-16);
	padding-bottom: var(--sp-16); margin-bottom: var(--sp-16); border-bottom: 1px solid var(--arg-border);
}
.sec-pieza__titulo { font-weight: 600; font-size: var(--fs-16); }
.sec-pieza__pie { margin-top: var(--sp-16); color: var(--arg-text-weak); font-size: var(--fs-14); font-weight: 500; line-height: 1.45; }
.sec-pieza strong { font-weight: 600; }
.sec-sin-partir { white-space: nowrap; }
/* Filas con ✓: el icono arriba, a la altura de la primera línea (O2 de la auditoría). */
.sec-check { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.sec-check > svg, .sec-check__icono { width: 18px; height: 18px; margin-top: 2px; color: var(--arg-leaf); }
.sec-check__icono svg { width: 18px; height: 18px; display: block; }
.sec-lista-check { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-8); }
/* Insignias (estado de una fila). */
.sec-insignia {
	display: inline-flex; align-items: center; padding: 2px var(--sp-8); border-radius: var(--radius-pill);
	font-size: var(--fs-14); font-weight: 600; line-height: 1.4; white-space: nowrap;
	background: var(--arg-lime-tint); color: var(--arg-leaf);
}
.sec-insignia--aviso { background: color-mix(in srgb, var(--arg-signal) 16%, var(--arg-white)); color: var(--arg-aviso-text); }
.sec-insignia--gris { background: var(--arg-neutral-100); color: var(--arg-text-weak); }
.sec-insignia--tinta { background: var(--arg-ink); color: var(--arg-lime); }

/* Movimiento al entrar (assets/js/secciones.js). Solo opacity y transform: la maqueta no se mueve. */
.sec-anima--js:not(.sec-anima--on) [data-sec-paso] { opacity: 0; transform: translateY(8px); }
[data-sec-paso] { transition: opacity .45s ease, transform .45s ease; transition-delay: calc(var(--i, 0) * 180ms); }
@media (prefers-reduced-motion: reduce) { [data-sec-paso] { transition: none; } }

/* ---------- Calculadora de planes (precio de las páginas de servicio) ---------- */
.sec-calc__control { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-16); margin-top: var(--sp-16); }
.sec-calc__etiqueta { font-weight: 600; font-size: var(--fs-18); }
.sec-calc__cifra { font-family: var(--arg-font-display); font-weight: 700; font-size: var(--fs-41); line-height: 1; font-variant-numeric: tabular-nums; }
.sec-calc__rango {
	--sec-calc-p: 20%;
	display: block; width: 100%; height: var(--target); margin: var(--sp-8) 0 0; background: transparent; cursor: pointer;
	-webkit-appearance: none; appearance: none;
}
.sec-calc__rango::-webkit-slider-runnable-track {
	height: 8px; border-radius: var(--radius-pill);
	background: linear-gradient(90deg, var(--arg-ink) 0 var(--sec-calc-p), var(--arg-neutral-200) var(--sec-calc-p) 100%);
}
.sec-calc__rango::-moz-range-track { height: 8px; border-radius: var(--radius-pill); background: var(--arg-neutral-200); }
.sec-calc__rango::-moz-range-progress { height: 8px; border-radius: var(--radius-pill); background: var(--arg-ink); }
.sec-calc__rango::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -10px;
	border: 3px solid var(--arg-ink); border-radius: 50%; background: var(--arg-lime);
}
.sec-calc__rango::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid var(--arg-ink); border-radius: 50%; background: var(--arg-lime); }
.sec-calc__rango:focus-visible { outline: 3px solid var(--arg-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.sec-calc__marcas { display: flex; justify-content: space-between; color: var(--arg-text-weak); font-family: var(--arg-font-mono); font-size: var(--fs-12); }
.sec-calc__filas { list-style: none; margin: var(--sp-16) 0 0; padding: 0; display: grid; gap: var(--sp-8); }
.sec-calc__fila {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "plan coste" "mejor coste"; align-items: center; column-gap: var(--sp-16); row-gap: var(--sp-4);
	padding: var(--sp-12) var(--sp-16); border: 1px solid var(--arg-border); border-radius: var(--radius-md);
	transition: background-color .2s ease, border-color .2s ease;
}
.sec-calc__plan { grid-area: plan; font-weight: 600; }
.sec-calc__mejor { grid-area: mejor; justify-self: start; }
.sec-calc__mejor:not([hidden]) {
	display: inline-flex; padding: 2px var(--sp-8); border-radius: var(--radius-pill);
	background: var(--arg-ink); color: var(--arg-lime); font-size: var(--fs-14); font-weight: 600; line-height: 1.4;
}
.sec-calc__coste { grid-area: coste; font-family: var(--arg-font-display); font-weight: 700; font-size: var(--fs-28); line-height: 1; font-variant-numeric: tabular-nums; }
.sec-calc__fila--mejor { border: 2px solid var(--arg-ink); background: var(--arg-lime-tint); }
.sec-calc__nota { margin-top: var(--sp-16); color: var(--arg-text-weak); font-size: var(--fs-14); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .sec-calc__fila { transition: none; } }

/* ---------- Factura de ejemplo (affordable) ---------- */
.sec-factura__origen { color: var(--arg-text-weak); }
.sec-factura__lineas { margin: var(--sp-16) 0 0; display: grid; }
.sec-factura__linea { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-16); padding-block: var(--sp-12); border-bottom: 1px dashed var(--arg-neutral-300); }
.sec-factura__linea dt { font-weight: 600; }
.sec-factura__linea dt span { display: block; color: var(--arg-text-weak); font-weight: 400; font-size: var(--fs-14); }
.sec-factura__linea dd { margin: 0; font-family: var(--arg-font-mono); font-size: var(--fs-16); font-variant-numeric: tabular-nums; }
.sec-factura__recargo dd { color: var(--arg-text-weak); text-decoration: line-through 2px var(--arg-aviso-text); }
.sec-factura__total { border-bottom: 0; }
.sec-factura__total dt, .sec-factura__total dd { font-weight: 700; font-size: var(--fs-18); }
.sec-factura__nuestra {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4) var(--sp-16);
	margin-top: var(--sp-16); padding: var(--sp-16); border-radius: var(--radius-md); background: var(--arg-ink); color: var(--arg-on-dark);
}
.sec-factura__nuestra .mono-etiqueta { grid-column: 1 / -1; color: var(--arg-lime); }
.sec-factura__nuestra p:not(.mono-etiqueta) { color: var(--arg-on-dark-weak); }
.sec-factura__importe { font-family: var(--arg-font-display); font-weight: 700; font-size: var(--fs-35); line-height: 1; color: var(--arg-lime); }
.sec-anima--js:not(.sec-anima--on) .sec-factura__recargo dd { text-decoration-color: transparent; color: var(--arg-text); }
.sec-factura__recargo dd { transition: text-decoration-color .5s ease, color .5s ease; transition-delay: calc(.4s + var(--i, 0) * 250ms); }
@media (prefers-reduced-motion: reduce) { .sec-factura__recargo dd { transition: none; } }

/* ---------- De dónde sale el precio (affordable): barra de tramos ---------- */
.sec-barra { display: grid; gap: var(--sp-8); }
.sec-barra + .sec-barra { margin-top: var(--sp-24); }
.sec-barra__nombre { font-weight: 600; }
.sec-barra__tramos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; min-height: 64px; }
.sec-barra__tramo {
	display: flex; align-items: flex-end; padding: var(--sp-8); border-radius: var(--radius-sm);
	background: var(--arg-neutral-200); color: var(--arg-text); font-size: var(--fs-14); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere;
}
.sec-barra__tramo--llamadas { background: var(--arg-lime); }
.sec-barra__tramo--fuera { background: transparent; border: 1px dashed var(--arg-neutral-300); color: var(--arg-neutral-500); font-weight: 400; text-decoration: line-through; }
.sec-barra .sec-lista-check { margin-top: var(--sp-8); }
/* Al entrar, los tres tramos empiezan como en la barra de arriba y se van quedando en hueco tachado. */
.sec-anima--js:not(.sec-anima--on) .sec-barra__tramo--fuera { background-color: var(--arg-neutral-200); border-color: transparent; color: var(--arg-text); text-decoration-color: transparent; }
.sec-barra__tramo--fuera { transition: background-color .5s ease, border-color .5s ease, color .5s ease, text-decoration-color .5s ease; transition-delay: calc(.3s + var(--i, 0) * 250ms); }
@media (prefers-reduced-motion: reduce) { .sec-barra__tramo--fuera { transition: none; } }

/* ---------- Registro de llamadas del sábado (customer-service) ---------- */
.sec-registro__cuentas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); margin-bottom: var(--sp-16); }
.sec-registro__cuenta { padding: var(--sp-12); border-radius: var(--radius-md); background: var(--arg-surface); }
.sec-registro__cuenta strong { display: block; font-family: var(--arg-font-display); font-size: var(--fs-35); line-height: 1; }
.sec-registro__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.sec-registro__llamada { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--sp-4) var(--sp-12); padding-block: var(--sp-12); border-top: 1px solid var(--arg-border); }
.sec-registro__hora { grid-row: span 2; font-family: var(--arg-font-mono); font-size: var(--fs-14); color: var(--arg-text-weak); padding-top: 2px; }
.sec-registro__pregunta { font-weight: 600; }
.sec-registro__respuesta { color: var(--arg-text-weak); }

/* ---------- Ficha de un posible cliente (lead-intake) ---------- */
.sec-ficha { display: grid; margin: 0; }
.sec-ficha__campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding-block: var(--sp-12); border-top: 1px solid var(--arg-border); }
.sec-ficha__campo:first-child { border-top: 0; padding-top: 0; }
.sec-ficha__campo dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.sec-ficha__campo dd > span:first-child { min-width: 0; }
.sec-ficha .sec-insignia--aviso { white-space: normal; }
@media (min-width: 600px) { .sec-ficha__campo { grid-template-columns: 120px minmax(0, 1fr); gap: var(--sp-16); } }

/* ---------- Línea de tiempo (overflow) ---------- */
.sec-tiempo__rotulo { margin-bottom: var(--sp-12); }
.sec-tiempo__pista { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-8); align-items: center; padding-block: var(--sp-8); border-top: 1px solid var(--arg-border); }
.sec-tiempo__quien { font-size: var(--fs-14); font-weight: 600; line-height: 1.3; }
.sec-tiempo__carril { position: relative; height: 32px; border-radius: var(--radius-sm); background: var(--arg-surface); }
.sec-tiempo__bloque {
	position: absolute; top: 4px; bottom: 4px; left: var(--desde); width: var(--ancho);
	display: flex; align-items: center; padding-inline: var(--sp-8); border-radius: var(--radius-sm);
	background: var(--arg-neutral-300); font-size: var(--fs-14); line-height: 1; white-space: nowrap; overflow: hidden;
}
.sec-tiempo__punto { position: absolute; top: 50%; left: var(--desde); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--arg-ink); box-shadow: 0 0 0 3px var(--arg-lime); }
.sec-tiempo__escala { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-8); }
.sec-tiempo__horas { display: flex; justify-content: space-between; font-family: var(--arg-font-mono); font-size: var(--fs-12); color: var(--arg-text-weak); }
.sec-tiempo__resultados { list-style: none; margin: var(--sp-16) 0 0; padding: 0; display: grid; gap: var(--sp-8); }
.sec-tiempo__resultado { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--sp-12); padding: var(--sp-12); border-radius: var(--radius-md); background: var(--arg-surface); }
.sec-tiempo__resultado .mono-etiqueta { font-size: var(--fs-14); color: var(--arg-text); padding-top: 2px; }
.sec-tiempo__cabezal { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--arg-leaf); transform-origin: left; opacity: 0; pointer-events: none; }
.sec-anima--js .sec-tiempo__cabezal { opacity: 1; }
.sec-anima--js.sec-anima--on .sec-tiempo__cabezal { left: 100%; opacity: 0; transition: left 4s linear, opacity .3s ease 4s; }

/* ---------- Varias llamadas a la vez (how-it-works) ---------- */
.sec-lineas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
.sec-linea { display: grid; gap: var(--sp-4); padding: var(--sp-12); border: 1px solid var(--arg-border); border-radius: var(--radius-md); background: var(--arg-lime-tint); }
.sec-linea .mono-etiqueta { color: var(--arg-text-weak); }
.sec-linea__estado { display: flex; align-items: center; gap: var(--sp-8); font-weight: 600; font-variant-numeric: tabular-nums; }
.sec-linea__estado::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--arg-leaf); }
.sec-lineas__frente { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-16); align-items: center; margin-top: var(--sp-16); padding: var(--sp-12) var(--sp-16); border-radius: var(--radius-md); background: var(--arg-neutral-100); color: var(--arg-text-weak); }
.sec-lineas__frente strong { color: var(--arg-text); }
@media (min-width: 600px) { .sec-lineas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Desde 900 la pieza va en columna (~420 px): a 3 casillas «Talking 1:42» se partiría (D2 de Fable). */
@media (min-width: 900px) and (max-width: 1279px) { .sec-lineas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sec-linea[data-sec-paso] { transition-delay: calc(var(--i, 0) * 120ms); }

/* ---------- Reglas y revisión diaria (how-it-works) ---------- */
.sec-reglas { list-style: none; margin: 0; padding: 0; display: grid; }
.sec-regla { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4) var(--sp-16); align-items: center; padding-block: var(--sp-12); border-top: 1px solid var(--arg-border); }
.sec-regla:first-child { border-top: 0; padding-top: 0; }
.sec-regla__nombre { font-weight: 600; }
.sec-regla__valor { grid-column: 1; color: var(--arg-text-weak); }
.sec-regla__interruptor { grid-column: 2; grid-row: 1 / span 2; position: relative; width: 48px; height: 28px; border-radius: var(--radius-pill); background: var(--arg-leaf); }
.sec-regla__interruptor::after { content: ""; position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--arg-white); }
.sec-revision { display: grid; gap: var(--sp-4); margin-top: var(--sp-16); padding: var(--sp-16); border-radius: var(--radius-md); background: var(--arg-ink); color: var(--arg-on-dark); }
.sec-pieza .sec-revision .mono-etiqueta { color: var(--arg-lime); }
.sec-revision p:not(.mono-etiqueta) { color: var(--arg-on-dark-weak); }
.sec-revision strong { color: var(--arg-on-dark); }

/* ---------- Seguimiento del alta (get-started) ---------- */
.sec-alta__pasos { list-style: none; margin: 0; padding: 0; display: grid; }
.sec-alta__paso { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--sp-4) var(--sp-12); padding-block: var(--sp-12); border-top: 1px solid var(--arg-border); }
.sec-alta__paso:first-child { border-top: 0; padding-top: 0; }
.sec-alta__marca { grid-row: span 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--arg-neutral-300); font-family: var(--arg-font-mono); font-size: var(--fs-14); color: var(--arg-text-weak); }
.sec-alta__marca svg { width: 16px; height: 16px; }
.sec-alta__paso--hecho .sec-alta__marca { border-color: var(--arg-leaf); background: var(--arg-leaf); color: var(--arg-white); }
.sec-alta__paso--ahora .sec-alta__marca { border-color: var(--arg-ink); background: var(--arg-lime); color: var(--arg-ink); }
.sec-alta__nombre { font-weight: 600; }
.sec-alta__estado { color: var(--arg-text-weak); }
.sec-alta__paso--pendiente .sec-alta__nombre { color: var(--arg-text-weak); }
/* «Approve protocol»: representación estática, no un botón (O4). */
.sec-alta__chip { justify-self: start; margin-top: var(--sp-4); padding: var(--sp-8) var(--sp-12); border-radius: var(--radius-md); background: var(--arg-neutral-100); color: var(--arg-ink); font-weight: 600; cursor: default; }

/* ---------- Borrador de protocolo (get-started) ---------- */
.sec-borrador { display: grid; margin: 0; }
.sec-borrador__bloque { display: grid; gap: var(--sp-4); padding-block: var(--sp-12); border-top: 1px solid var(--arg-border); }
.sec-borrador__bloque:first-child { border-top: 0; padding-top: 0; }
.sec-borrador__bloque dd { margin: 0; }
.sec-borrador__bloque ol { margin: 0; padding-left: var(--sp-24); }
.sec-borrador__viejo { color: var(--arg-text-weak); text-decoration: line-through; }
.sec-borrador__nuevo { display: inline; padding: 0 var(--sp-4); border-radius: var(--radius-sm); background: var(--arg-lime-tint); box-shadow: inset 0 -2px 0 var(--arg-leaf); }
.sec-borrador__edicion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); margin-top: var(--sp-4); }

/* ---------- Tarjetas que giran de /about/ (sobre oscuro) ---------- */
.sec-vueltas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-12); }
.sec-vueltas .vuelta__cara { padding: var(--sp-16) var(--sp-24); }
.sec-vueltas .pag-tarjeta__titulo { font-size: var(--fs-20); line-height: 1.3; }
.sec-vueltas .vuelta__dorso .mono-etiqueta { font-size: var(--fs-12); }
.sec-vueltas .vuelta__texto { font-size: var(--fs-20); line-height: 1.4; }
.sec-vueltas-pieza .sec-pieza__pie { color: var(--arg-on-dark-weak); }
.sec-vueltas-pieza > .mono-etiqueta { margin-bottom: var(--sp-12); color: var(--arg-on-dark-weak); font-size: var(--fs-12); }
.sec-vueltas .vuelta__frente:focus-within { outline: 2px solid var(--arg-lime); outline-offset: 2px; }

/* ---------- Mapa de Nuevo México (/about/) ---------- */
.sec-mapa { margin: 0; }
.sec-mapa svg { display: block; width: 100%; height: auto; max-height: 360px; }
.sec-mapa__estado { fill: var(--arg-lime-tint); stroke: var(--arg-leaf); stroke-width: 2; }
.sec-mapa__rejilla { stroke: var(--arg-neutral-200); stroke-width: 1; }
.sec-mapa__punto { fill: var(--arg-ink); }
.sec-mapa__onda { fill: none; stroke: var(--arg-ink); stroke-width: 2; opacity: .35; }
.sec-mapa__ciudad { fill: var(--arg-ink); font-family: var(--arg-font-mono); font-size: 14px; letter-spacing: .06em; }
.sec-mapa figcaption { display: grid; gap: var(--sp-4); margin-top: var(--sp-16); padding-top: var(--sp-16); border-top: 1px solid var(--arg-border); }

/* ---------- Sobre postal (/contact/) ---------- */
.sec-sobre { position: relative; padding-top: var(--sp-32); background:
	repeating-linear-gradient(135deg, var(--arg-signal) 0 10px, var(--arg-white) 10px 20px, var(--arg-leaf) 20px 30px, var(--arg-white) 30px 40px) top / 100% 8px no-repeat,
	var(--arg-surface-card); }
.sec-sobre__sello {
	position: absolute; top: var(--sp-24); right: var(--sp-16); display: grid; place-items: center; width: 56px; height: 64px;
	border: 2px dashed var(--arg-leaf); border-radius: var(--radius-sm); background: var(--arg-lime-tint); color: var(--arg-leaf);
}
.sec-sobre__sello svg { width: 28px; height: 28px; }
.sec-sobre__etiqueta { margin-top: var(--sp-48); margin-right: 0; padding: var(--sp-16); border: 1px solid var(--arg-border); border-radius: var(--radius-md); background: var(--arg-surface); font-family: var(--arg-font-mono); font-size: var(--fs-14); line-height: 1.6; }
.sec-sobre__etiqueta span { display: block; }
.sec-sobre__etiqueta span:not(:last-child) { white-space: nowrap; }
.sec-sobre__etiqueta strong { display: block; font-weight: 500; text-transform: none; }
.sec-sobre__atajo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); margin-top: var(--sp-16); }
.sec-sobre__atajo a { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: var(--target); font-weight: 600; }
.sec-sobre__atajo svg { width: 18px; height: 18px; }
@media (min-width: 600px) {
	.sec-sobre__etiqueta { margin-left: 12%; font-size: var(--fs-16); }
	.sec-sobre__sello { right: var(--sp-24); }
}

/* ---------- Mensajes al que llama (/pricing/, «What's included») ---------- */
/* Fila entera y fuera del subgrid de tres filas de las demás tarjetas (sin él, sobra un hueco abajo). */
.pag-rejilla > .sec-sms { grid-column: 1 / -1; grid-row: auto; display: block; }
.sec-sms.pag-tarjeta { border: 2px solid var(--arg-ink); }
.sec-sms__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
.sec-sms .sec-lista-check { margin-top: var(--sp-16); }
.sec-sms__movil { padding: var(--sp-16); border-radius: var(--radius-lg); background: var(--arg-surface); }
.sec-sms__de { display: grid; gap: 2px; padding-bottom: var(--sp-12); margin-bottom: var(--sp-12); border-bottom: 1px solid var(--arg-border); }
.sec-sms__de span { color: var(--arg-text-weak); font-family: var(--arg-font-mono); font-size: var(--fs-14); }
.sec-sms__burbujas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-8); }
.sec-sms__burbuja { justify-self: start; max-width: 92%; padding: var(--sp-8) var(--sp-12); border-radius: var(--radius-md) var(--radius-md) var(--radius-md) var(--sp-4); background: var(--arg-white); border: 1px solid var(--arg-border); font-size: var(--fs-16); line-height: 1.45; }
.sec-sms__burbuja span { display: block; color: var(--arg-text-weak); font-size: var(--fs-14); }
.sec-sms .sec-pieza__pie { margin-top: var(--sp-12); }
/* Texto centrado en vertical frente a los mensajes: sin media columna izquierda en blanco (D7). */
@media (min-width: 768px) { .sec-sms__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-48); align-items: center; } }

/* ---------- Ajustes de páginas con rejilla nueva ---------- */
/* get-started: los pasos ocupan ahora la columna de texto; su titular baja un escalón bajo el H2. */
.sec-rejilla .empezar-paso__titulo { font-size: var(--fs-28); }
/* about: la ficha de la empresa llena su columna. */
.sec-rejilla .about-empresa { max-width: none; }

/* =====================================================================================
   Secciones 2 (Figma 125:3333, OK de Fernando el 16-10): P1 Protocolo, P2 Registro,
   P3 Calendario, P4 Recibo, P5 Conversación y L1. Misma rejilla y mismas reglas de movimiento.
   ===================================================================================== */

/* ---------- «The method…»: las reglas numeradas pasan a una columna, junto a la pieza ---------- */
.sec-rejilla__texto > .pag-seccion__cabeza:has(+ .pag-reglas, + .pag-pasos__lista) { margin-bottom: var(--sp-24); }
.sec-rejilla .pag-reglas,
.sec-rejilla .pag-reglas:has(> li:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
.sec-rejilla .pag-regla { grid-template-columns: 32px minmax(0, 1fr); font-size: var(--fs-16); line-height: 1.5; }
.sec-rejilla .pag-regla__numero { width: 32px; height: 32px; font-family: var(--arg-font-sans); font-size: var(--fs-16); font-weight: 600; }
.sec-rejilla .pag-regla > p { padding-top: 4px; }
.sec-rejilla .pag-reglas + .pag-pie,
.sec-rejilla .pag-pasos__lista + .pag-pie { margin-top: var(--sp-24); font-size: var(--fs-16); line-height: 1.5; }
.seccion--oscura .sec-rejilla .pag-pie { color: var(--arg-on-dark-weak); }
/* ai-phone-assistant y auto-attendant (sección clara, pasos con título): una columna y título más bajo. */
.sec-rejilla .pag-pasos__lista,
.sec-rejilla .pag-pasos__lista:has(> li:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
.sec-rejilla .pag-paso { display: block; padding-top: var(--sp-16); }
.sec-rejilla .pag-paso__titulo { min-height: 0; margin-top: var(--sp-8); font-size: var(--fs-20); }
.sec-rejilla .pag-paso__texto { margin-top: var(--sp-8); font-size: var(--fs-16); line-height: 1.5; }

/* ---------- P1 · Protocolo (tarjeta oscura con las cinco reglas) ---------- */
.sec-proto {
	container-type: inline-size;
	margin: 0; padding: var(--sp-24); border: 1px solid var(--arg-neutral-700); border-radius: var(--radius-lg);
	background: var(--arg-neutral-800); color: var(--arg-on-dark); font-size: var(--fs-16); line-height: 1.5; text-wrap: pretty;
}
@media (min-width: 600px) { .sec-proto { padding: var(--sp-32); } }
.sec-proto__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-12); padding-bottom: var(--sp-12); }
.sec-proto__icono { display: flex; flex: none; color: var(--arg-on-dark-accent); }
.sec-proto__icono svg { width: 20px; height: 20px; }
.sec-proto__rubro, .sec-proto__rotulo { font-family: var(--arg-font-mono); font-size: var(--fs-12); font-weight: 500; line-height: 1.4; letter-spacing: var(--ls-caps); text-transform: uppercase; }
.sec-proto__rubro { flex: 1 0 0; min-width: 0; color: var(--arg-neutral-300); }
.sec-proto__insignia {
	display: inline-flex; flex: none; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-12) var(--sp-4) var(--sp-8);
	border-radius: var(--radius-pill); background: var(--arg-success-tint); color: var(--arg-success); font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.sec-proto__insignia svg { width: 16px; height: 16px; }
/* Tarjeta estrecha (390): si el rubro no cabe junto a la insignia, la insignia baja a su fila. */
@container (max-width: 320px) { .sec-proto__rubro { flex-basis: calc(100% - 32px); } }
.sec-proto__rotulo { padding-bottom: var(--sp-8); color: var(--arg-on-dark-accent); }
.sec-proto__reglas { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--arg-neutral-700); }
.sec-proto__regla { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--sp-16); align-items: start; padding-block: 14px; border-top: 1px solid var(--arg-neutral-700); }
.sec-proto__marca {
	display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px var(--arg-neutral-700); color: var(--arg-neutral-500);
}
.sec-proto__marca svg { width: 18px; height: 18px; }
.sec-proto__nombre { padding-top: 3px; font-weight: 600; line-height: 1.3; color: var(--arg-neutral-300); }
.sec-proto__linea { margin-top: var(--sp-4); color: var(--arg-neutral-300); }
.sec-proto__regla--on .sec-proto__marca { background: var(--arg-lime); box-shadow: none; color: var(--arg-ink); }
.sec-proto__regla--on .sec-proto__nombre { color: var(--arg-on-dark); }
.sec-proto__pie.sec-pieza__pie { margin-top: 0; padding-top: var(--sp-16); color: var(--arg-neutral-300); }
/* Al entrar: todas apagadas; las encendidas se iluminan en el orden de la sección (nota 127:3512). */
.sec-anima--js:not(.sec-anima--on) .sec-proto__regla--on .sec-proto__marca { background: transparent; box-shadow: inset 0 0 0 1.5px var(--arg-neutral-700); color: var(--arg-neutral-500); }
.sec-anima--js:not(.sec-anima--on) .sec-proto__regla--on .sec-proto__nombre { color: var(--arg-neutral-300); }
.sec-anima--js:not(.sec-anima--on) .sec-proto__regla--on .sec-proto__linea { opacity: 0; transform: translateY(8px); }
.sec-anima--on .sec-proto__regla--on .sec-proto__marca { transition: background-color .2s ease, box-shadow .2s ease, color .2s ease; transition-delay: calc(.3s + var(--i, 0) * 400ms); }
.sec-anima--on .sec-proto__regla--on .sec-proto__nombre { transition: color .2s ease; transition-delay: calc(.3s + var(--i, 0) * 400ms); }
.sec-anima--on .sec-proto__regla--on .sec-proto__linea { transition: opacity .3s ease, transform .3s ease; transition-delay: calc(.4s + var(--i, 0) * 400ms); }
@media (prefers-reduced-motion: reduce) { .sec-proto * { transition: none !important; } }

/* ---------- Común a P2–P5: tarjeta de 32 px de aire desde 600 (Figma), insignias con icono ---------- */
.sec-registro, .sec-cal, .sec-recibo, .sec-conv { container-type: inline-size; }
@media (min-width: 600px) { .sec-registro, .sec-cal, .sec-recibo, .sec-conv { padding: var(--sp-32); } }
.sec-rejilla + .pag-captura, .sec-rejilla + .micro-video { margin-top: var(--sp-48); }
/* Tag del sistema (Figma 4:90): icono + texto, nunca solo color. Ámbar solo para Urgent. */
.sec-insignia-tag {
	display: inline-flex; flex: none; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-12);
	border-radius: var(--radius-pill); font-weight: 600; line-height: 1.3; white-space: nowrap;
	background: var(--arg-neutral-100); color: var(--arg-text-weak);
}
.sec-insignia-tag:has(svg) { padding-left: var(--sp-8); }
.sec-insignia-tag svg { width: 16px; height: 16px; }
.sec-insignia-tag--urgente { background: var(--arg-signal); color: var(--arg-text); }
.sec-insignia-tag--exito { background: var(--arg-success-tint); color: var(--arg-success); }
.sec-chip { display: inline-flex; flex: none; padding: var(--sp-4) var(--sp-12); border-radius: var(--radius-pill); background: var(--arg-surface-dark); color: var(--arg-on-dark); font-size: var(--fs-14); font-weight: 500; line-height: 1.4; white-space: nowrap; }

/* ---------- P2 · Registro (emergency, call-dashboard) ---------- */
.sec-registro__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-12); padding-bottom: var(--sp-16); }
.sec-registro__icono { display: flex; flex: none; }
.sec-registro__icono svg { width: 20px; height: 20px; }
.sec-registro__titulo { flex: 1 0 0; min-width: 200px; display: grid; gap: 2px; }
.sec-registro .sec-pieza__titulo { line-height: 1.3; }
.sec-registro__filas { list-style: none; margin: 0; padding: 0; }
.sec-registro__fila { display: grid; gap: 10px; padding: 14px var(--sp-16); }
.sec-registro__fila + .sec-registro__fila { border-top: 1px solid var(--arg-border); }
.sec-registro__fila--abierta { border-radius: var(--radius-md); background: var(--arg-neutral-100); }
.sec-registro__fila--abierta + .sec-registro__fila, .sec-registro__fila + .sec-registro__fila--abierta { border-top-color: transparent; }
.sec-registro__linea { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-12); }
.sec-registro__hora { flex: none; font-family: var(--arg-font-mono); font-size: var(--fs-14); line-height: 1.55; color: var(--arg-text-weak); white-space: nowrap; }
.sec-registro__motivo { flex: 1 0 0; min-width: min(200px, 40cqi); font-weight: 600; line-height: 1.3; }
.sec-registro__hecho { color: var(--arg-text-weak); font-weight: 500; line-height: 1.4; }
.sec-registro__detalle { display: grid; gap: 6px; line-height: 1.5; }
.sec-registro__pista { font-family: var(--arg-font-mono); font-size: var(--fs-12); font-weight: 500; line-height: 1.4; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--arg-text-weak); }
.sec-registro__recuento { padding: var(--sp-16) 0 var(--sp-8); font-family: var(--arg-font-mono); font-size: var(--fs-12); font-weight: 500; line-height: 1.4; letter-spacing: var(--ls-caps); text-transform: uppercase; }
.sec-registro .sec-pieza__pie { margin-top: 0; }
/* Tarjeta estrecha (390): la hora en su fila, el motivo debajo y la insignia bajo el motivo (nota 129:3687). */
@container (max-width: 330px) { .sec-registro__hora, .sec-registro__motivo { flex-basis: 100%; } }
/* Al entrar: filas en su orden (600 ms entre una y otra), detalle que se despliega, Urgent que parpadea una vez, recuento al final. */
.sec-anima--js:not(.sec-anima--on) .sec-registro__fila,
.sec-anima--js:not(.sec-anima--on) .sec-registro__recuento { opacity: 0; transform: translateY(8px); }
.sec-anima--js:not(.sec-anima--on) .sec-registro__detalle { opacity: 0; transform: translateY(-6px); }
.sec-anima--on .sec-registro__fila,
.sec-anima--on .sec-registro__recuento { transition: opacity .4s ease, transform .4s ease; transition-delay: calc(.2s + var(--i, 0) * 600ms); }
.sec-anima--on .sec-registro__detalle { transition: opacity .3s ease, transform .3s ease; transition-delay: calc(.6s + var(--i, 0) * 600ms); }
.sec-anima--on .sec-registro__fila .sec-insignia-tag--urgente { animation: sec-parpadeo .9s ease 1 both; animation-delay: calc(.5s + var(--i, 0) * 600ms); }
@keyframes sec-parpadeo { 0%, 100% { opacity: 1; } 35% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .sec-registro * { transition: none !important; animation: none !important; } }

/* ---------- P5 · Conversación (bilingual: cambio de idioma; call-recording: aviso de grabación) ---------- */
.sec-conv__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-12); padding-bottom: var(--sp-16); margin-bottom: var(--sp-12); border-bottom: 1px solid var(--arg-border); }
.sec-conv__icono { display: flex; flex: none; }
.sec-conv__icono svg { width: 20px; height: 20px; }
.sec-conv__titulo { flex: 1 0 0; min-width: 0; display: grid; gap: 2px; }
.sec-conv .sec-pieza__titulo { line-height: 1.3; }
.sec-conv__chip { gap: .6ch; font-family: var(--arg-font-mono); font-size: var(--fs-12); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.sec-conv__turnos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-12); justify-items: start; }
.sec-conv__turno { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--sp-12); align-items: baseline; width: 100%; }
.sec-conv--aviso .sec-conv__turno { grid-template-columns: 84px minmax(0, 1fr); }
.sec-conv__quien { font-family: var(--arg-font-mono); font-size: var(--fs-12); font-weight: 500; line-height: 1.4; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--arg-text-weak); }
.sec-conv__turno--ia .sec-conv__quien { color: var(--arg-success); }
.sec-conv__texto { line-height: 1.5; }
.sec-conv__turno--aviso { padding: 10px var(--sp-12); border-radius: var(--radius-sm); background: var(--arg-lime); color: var(--arg-ink); }
.sec-conv__turno--aviso .sec-conv__quien { color: var(--arg-ink); }
.sec-conv__turno--aviso .sec-conv__texto { font-weight: 600; line-height: 1.3; }
.sec-conv__marca { display: inline-flex; align-items: center; gap: var(--sp-8); padding: 6px var(--sp-12); border-radius: var(--radius-pill); background: var(--arg-lime-tint); font-size: var(--fs-14); font-weight: 500; line-height: 1.4; }
.sec-conv__marca svg { width: 16px; height: 16px; flex: none; }
.sec-conv__resumen { display: grid; gap: 6px; margin-top: var(--sp-12); padding: 14px var(--sp-16); border-radius: var(--radius-md); background: var(--arg-lime-tint); font-weight: 500; line-height: 1.4; }
.sec-conv__resumen-rotulo { display: flex; align-items: center; gap: var(--sp-8); font-family: var(--arg-font-mono); font-size: var(--fs-12); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--arg-success); }
.sec-conv__resumen-rotulo svg { width: 16px; height: 16px; flex: none; }
.sec-conv__nota { margin-top: var(--sp-12); padding-top: var(--sp-12); border-top: 1px solid var(--arg-border); font-weight: 500; line-height: 1.4; }
.sec-conv .sec-pieza__pie { margin-top: var(--sp-12); }
/* Tarjeta estrecha (< 440 px, nota 135:4395): en el cambio de idioma, el rótulo encima de cada turno y el
   chip bajo el nombre del negocio; el aviso mantiene su columna de 84 px (marco 139:15821). */
@container (max-width: 375px) {
	.sec-conv--idioma .sec-conv__turno { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
	.sec-conv--idioma .sec-conv__chip { margin-left: 32px; }
	.sec-conv--idioma .sec-conv__titulo { flex-basis: calc(100% - 32px); }
}
/* Al entrar: turnos uno tras otro (600 ms); el chip pasa de EN a EN → ES con la marca; el aviso se
   rellena de lima de izquierda a derecha; al final, el resumen o la nota. */
.sec-anima--js:not(.sec-anima--on) :is(.sec-conv__turno, .sec-conv__marca, .sec-conv__resumen, .sec-conv__nota) { opacity: 0; transform: translateY(8px); }
.sec-anima--js:not(.sec-anima--on) .sec-conv__chip-es { opacity: 0; }
.sec-anima--js:not(.sec-anima--on) .sec-conv__turno--aviso { background-size: 0% 100%; }
.sec-conv__turno--aviso { background-image: linear-gradient(var(--arg-lime), var(--arg-lime)); background-repeat: no-repeat; background-size: 100% 100%; }
.sec-anima--js .sec-conv__turno--aviso { background-color: transparent; }
.sec-anima--on :is(.sec-conv__turno, .sec-conv__marca, .sec-conv__resumen, .sec-conv__nota) { transition: opacity .4s ease, transform .4s ease; transition-delay: calc(.2s + var(--i, 0) * 600ms); }
.sec-anima--on .sec-conv__chip-es { transition: opacity .3s ease; transition-delay: calc(.2s + 2 * 600ms); }
.sec-anima--on .sec-conv__turno--aviso { transition: opacity .4s ease, transform .4s ease, background-size .4s ease; transition-delay: calc(.2s + var(--i, 0) * 600ms), calc(.2s + var(--i, 0) * 600ms), calc(.5s + var(--i, 0) * 600ms); }
@media (prefers-reduced-motion: reduce) { .sec-conv * { transition: none !important; } }

/* ---------- Cabeceras de P3 y P4 (icono + rótulo mono + negocio) ---------- */
.sec-cal__cabeza, .sec-recibo__cabeza { display: flex; align-items: center; gap: var(--sp-12); padding-bottom: var(--sp-16); }
.sec-cal__icono, .sec-recibo__icono { display: flex; flex: none; }
.sec-cal__icono svg, .sec-recibo__icono svg { width: 20px; height: 20px; }
.sec-cal__titulo, .sec-recibo__titulo { flex: 1 0 0; min-width: 0; display: grid; gap: 2px; }
.sec-cal .sec-pieza__titulo, .sec-recibo .sec-pieza__titulo { line-height: 1.3; }
.sec-cal .sec-pieza__pie, .sec-recibo .sec-pieza__pie { margin-top: var(--sp-12); }
/* /pricing/: la rejilla de la cabecera y la pieza va encima de los cuatro puntos a ancho completo. */
.sec-rejilla > .pag-seccion__cabeza { margin-bottom: 0; }
.sec-rejilla--sobre-pasos { margin-bottom: var(--sp-48); }

/* ---------- P3 · Calendario ---------- */
.sec-cal__semana { display: grid; grid-template-columns: 44px repeat(5, minmax(0, 1fr)); gap: var(--sp-4) 6px; }
.sec-cal__dia { font-size: var(--fs-14); font-weight: 500; line-height: 1.4; color: var(--arg-text-weak); }
.sec-cal__hora { padding-top: var(--sp-4); font-family: var(--arg-font-mono); font-size: var(--fs-12); font-weight: 500; line-height: 1.4; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--arg-text-weak); white-space: nowrap; }
.sec-cal__hueco { display: grid; place-items: center; height: 36px; border-radius: var(--radius-sm); }
.sec-cal__hueco svg { width: 18px; height: 18px; }
.sec-cal__hueco--libre { border: 1px solid var(--arg-border); }
.sec-cal__hueco--ocupado { background: var(--arg-neutral-100); }
.sec-cal__hueco--reservado { background: var(--arg-lime); color: var(--arg-ink); }
.sec-cal__hueco--ofrecido { border: 1.5px dashed var(--arg-ink); }
.sec-cal__leyenda { list-style: none; margin: var(--sp-16) 0 0; padding: 0; display: grid; gap: var(--sp-8); font-size: var(--fs-14); font-weight: 500; line-height: 1.4; }
.sec-cal__leyenda li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; }
.sec-cal__muestra { display: block; width: 28px; height: 18px; border-radius: 4px; }
.sec-cal__nota { display: grid; gap: var(--sp-4); margin-top: var(--sp-16); padding: var(--sp-12) var(--sp-16); border-radius: var(--radius-md); background: var(--arg-lime-tint); font-weight: 500; line-height: 1.4; }
.sec-cal__nota-rotulo { font-family: var(--arg-font-mono); font-size: var(--fs-12); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--arg-success); }
.sec-cal__mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-4); }
.sec-cal--mes .sec-cal__dia { text-align: center; font-family: var(--arg-font-mono); font-size: var(--fs-12); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.sec-cal__celda { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); height: 48px; padding-top: 6px; border-radius: var(--radius-sm); font-family: var(--arg-font-mono); font-size: var(--fs-12); font-weight: 500; line-height: 1.4; }
.sec-cal__celda--hoy { border: 1.5px solid var(--arg-success); background: var(--arg-lime-tint); }
.sec-cal__puntos { display: flex; gap: var(--sp-4); }
.sec-cal__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--arg-success); }
.sec-cal__total { display: flex; align-items: center; gap: var(--sp-12); margin-top: var(--sp-16); font-weight: 500; line-height: 1.4; }
.sec-cal__cifra { font-family: var(--arg-font-display); font-size: var(--fs-28); font-weight: 600; line-height: 1.15; }
/* Al entrar: semana, los huecos libres parpadean y la cita se rellena con su marca; después, la frase.
   Mes: los puntos caen día a día (40 ms) y el martes se enmarca; después, su tarjeta y el total. */
.sec-anima--js:not(.sec-anima--on) .sec-cal__semana .sec-cal__hueco--reservado { background: transparent; box-shadow: inset 0 0 0 1px var(--arg-border); }
.sec-anima--js:not(.sec-anima--on) .sec-cal__semana .sec-cal__hueco--reservado svg { opacity: 0; }
.sec-anima--js:not(.sec-anima--on) .sec-cal__punto { opacity: 0; transform: translateY(-6px); }
.sec-anima--js:not(.sec-anima--on) .sec-cal__celda--hoy { border-color: transparent; background: transparent; }
.sec-anima--js:not(.sec-anima--on) :is(.sec-cal__nota, .sec-cal__total) { opacity: 0; transform: translateY(8px); }
.sec-anima--on .sec-cal__semana .sec-cal__hueco--libre { animation: sec-libre .7s ease 1 both; animation-delay: .2s; }
@keyframes sec-libre { 0%, 100% { background: transparent; } 45% { background: var(--arg-lime-tint); } }
.sec-anima--on .sec-cal__semana .sec-cal__hueco--reservado { transition: background-color .3s ease, box-shadow .3s ease; transition-delay: 1s; }
.sec-anima--on .sec-cal__semana .sec-cal__hueco--reservado svg { transition: opacity .3s ease; transition-delay: 1.2s; }
.sec-anima--on .sec-cal--semana .sec-cal__nota { transition: opacity .4s ease, transform .4s ease; transition-delay: 1.6s; }
.sec-anima--on .sec-cal__punto { transition: opacity .3s ease, transform .3s ease; transition-delay: calc(.2s + var(--i, 0) * 40ms); }
.sec-anima--on .sec-cal__celda--hoy { transition: border-color .3s ease, background-color .3s ease; transition-delay: 1.6s; }
.sec-anima--on :is(.sec-cal--mes .sec-cal__nota, .sec-cal__total) { transition: opacity .4s ease, transform .4s ease; transition-delay: 1.9s; }
@media (prefers-reduced-motion: reduce) { .sec-cal * { transition: none !important; animation: none !important; } }

/* ---------- P4 · Recibo ---------- */
.sec-recibo__recientes { list-style: none; margin: 0; padding: 0 0 var(--sp-16); display: grid; gap: var(--sp-8); border-bottom: 1px solid var(--arg-border); font-size: var(--fs-14); font-weight: 500; line-height: 1.4; }
.sec-recibo__recientes li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--sp-12); }
.sec-recibo__fecha { font-family: var(--arg-font-mono); font-size: var(--fs-12); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--arg-text-weak); padding-top: 1px; }
.sec-recibo__recientes .sec-recibo__mas { display: block; color: var(--arg-text-weak); }
.sec-recibo__lineas { margin: 0; border-bottom: 1px solid var(--arg-border); }
.sec-recibo__linea { display: flex; align-items: flex-start; gap: var(--sp-16); padding-block: var(--sp-12); }
.sec-recibo__linea dt { flex: 1 1 0; min-width: 0; font-weight: 600; line-height: 1.3; }
.sec-recibo__linea dd { flex: none; margin: 0; text-align: right; white-space: nowrap; }
.sec-recibo__total { display: flex; align-items: center; gap: var(--sp-16); padding: var(--sp-16) 0 var(--sp-8); }
.sec-recibo__total > p:first-child { flex: 1 1 0; min-width: 0; display: grid; gap: 2px; line-height: 1.3; }
.sec-recibo__total strong { font-weight: 600; }
.sec-recibo__total span { color: var(--arg-text-weak); font-size: var(--fs-14); font-weight: 500; line-height: 1.4; }
.sec-recibo__importe { flex: none; font-family: var(--arg-font-display); font-size: var(--fs-28); font-weight: 600; line-height: 1.15; white-space: nowrap; }
.sec-recibo__pasos { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--arg-border); }
.sec-recibo__pasos li { display: grid; grid-template-columns: 22px 96px minmax(0, 1fr); gap: var(--sp-16); align-items: start; padding-block: var(--sp-12); }
.sec-recibo__marca { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--arg-lime); color: var(--arg-ink); }
.sec-recibo__marca svg { width: 13px; height: 13px; stroke-width: 3; }
.sec-recibo__paso { padding-top: 2px; font-family: var(--arg-font-mono); font-size: var(--fs-12); font-weight: 500; line-height: 1.4; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--arg-text-weak); }
.sec-recibo__hecho { line-height: 1.5; }
.sec-recibo__cierre { margin-top: var(--sp-12); font-weight: 500; line-height: 1.4; }
@container (max-width: 330px) { .sec-recibo__pasos li { grid-template-columns: 22px 80px minmax(0, 1fr); gap: var(--sp-12); } }
.sec-recibo__llamada { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-12) var(--sp-16); border-radius: var(--radius-pill); background: var(--arg-neutral-100); }
.sec-recibo__llamada p { flex: none; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.sec-recibo__onda { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: space-between; height: 22px; overflow: hidden; }
.sec-recibo__onda span { flex: none; width: 3px; height: var(--h, 10px); border-radius: 2px; background: var(--arg-ink); }
.sec-recibo__formas { margin: var(--sp-12) 0 0; }
.sec-recibo__forma { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-16); padding-block: var(--sp-12); }
.sec-recibo__forma + .sec-recibo__forma { border-top: 1px solid var(--arg-border); }
.sec-recibo__forma dt { flex: 1 0 0; min-width: 150px; max-width: 170px; font-weight: 600; line-height: 1.3; }
.sec-recibo__forma dt span { display: block; margin-top: 2px; color: var(--arg-text-weak); font-size: var(--fs-14); font-weight: 500; line-height: 1.4; }
.sec-recibo__forma dd { flex: 1 0 0; min-width: 200px; margin: 0; line-height: 1.5; }
.sec-recibo__forma--nuestra { padding: var(--sp-12); border-radius: var(--radius-sm); background: var(--arg-lime-tint); }
.sec-recibo__forma--nuestra, .sec-recibo__forma + .sec-recibo__forma--nuestra { border-top-color: transparent; }
/* Tarjeta estrecha: la etiqueta encima del valor (nota 133:4341). */
@container (max-width: 400px) { .sec-recibo__forma { flex-wrap: nowrap; } .sec-recibo__forma dt { flex: 0 0 120px; min-width: 0; } .sec-recibo__forma dd { min-width: 0; } }
@container (max-width: 310px) { .sec-recibo__forma { flex-wrap: wrap; } .sec-recibo__forma dt { flex-basis: 100%; max-width: none; } .sec-recibo__forma dd { flex-basis: 100%; } }
/* /pricing/ entre 900 y 1023: los cuatro puntos a dos columnas (apilados dejaban la derecha vacía). */
@media (min-width: 900px) and (max-width: 1023px) { .sec-rejilla--sobre-pasos + .pag-pasos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Al entrar: filas en su orden; la onda se dibuja de izquierda a derecha (la llamada «dura»). */
.sec-anima--js:not(.sec-anima--on) :is(.sec-recibo__recientes li, .sec-recibo__forma, .sec-recibo__cierre, .sec-recibo__total) { opacity: 0; transform: translateY(8px); }
.sec-anima--js:not(.sec-anima--on) .sec-recibo__marca { background: var(--arg-neutral-100); color: transparent; }
.sec-anima--js:not(.sec-anima--on) .sec-recibo__onda span { transform: scaleY(.15); }
.sec-anima--on :is(.sec-recibo__recientes li, .sec-recibo__cierre) { transition: opacity .35s ease, transform .35s ease; transition-delay: calc(.2s + var(--i, 0) * 150ms); }
.sec-anima--on .sec-recibo__total { transition: opacity .4s ease, transform .4s ease; transition-delay: .9s; }
.sec-anima--on .sec-recibo__pasos li .sec-recibo__marca { transition: background-color .2s ease, color .2s ease; }
.sec-anima--on .sec-recibo__pasos li:nth-child(1) .sec-recibo__marca { transition-delay: .2s; }
.sec-anima--on .sec-recibo__pasos li:nth-child(2) .sec-recibo__marca { transition-delay: .35s; }
.sec-anima--on .sec-recibo__pasos li:nth-child(3) .sec-recibo__marca { transition-delay: .5s; }
.sec-anima--on .sec-recibo__pasos li:nth-child(4) .sec-recibo__marca { transition-delay: .65s; }
.sec-anima--on .sec-recibo__pasos li:nth-child(5) .sec-recibo__marca { transition-delay: .8s; }
.sec-anima--on .sec-recibo__pasos li:nth-child(6) .sec-recibo__marca { transition-delay: .95s; }
.sec-anima--on .sec-recibo__onda span { transition: transform .25s ease; transition-delay: calc(var(--i, 0) * 25ms); }
.sec-anima--on .sec-recibo__forma { transition: opacity .4s ease, transform .4s ease; transition-delay: calc(1s + var(--i, 0) * 400ms); }
@media (prefers-reduced-motion: reduce) { .sec-recibo * { transition: none !important; } }