/* ==========================================================================
   PROFIT7 — Sección 3 · LOS 5 PILARES DE PROFIT7

   Superficie de la sección y su cabecera. El cilindro, sus accesos numerados
   y la columna de productos están en pilares-cilindro.css, que se carga justo
   después y hereda los tokens declarados aquí.

   La sección hereda el blanco de la rampa de color del Atlas
   (--atlas-bg/--atlas-ink, calculadas en :root por atlas.js, cuyo dawn()
   quedó anclado a esta misma sección). El champagne de marca se mantiene
   igual sobre cualquiera de los dos fondos.

   Las TARJETAS —las caras del cilindro y las de productos— siguen siendo
   oscuras a propósito, para que su texto claro funcione igual que antes: sólo
   la superficie de la sección se invirtió, no las tarjetas.

   Se retiró de este archivo todo el CSS del antiguo carrete horizontal
   (.p7deck-rail, .p7deck-track, .p7deck-slot, .p7deck-card y sus estados):
   ese marcado ya no existe desde que el carrete se sustituyó por el cilindro,
   y dejarlo aquí sólo invitaba a creer que seguía en uso.
   ========================================================================== */

.p7deck{
	position:relative;
	z-index:2;
	/* Blanco heredado del Atlas, no un color fijo: sigue viva la misma
	   variable que anima el resto de la rampa. */
	background:var(--atlas-bg,#FFFFFF);
	color:var(--atlas-ink,#0A0A0C);
	/* La MISMA transición que .atlas-scene. Las dos secciones leen la misma
	   variable, pero el Atlas la suavizaba en 180 ms y esta la aplicaba de
	   golpe: durante el cambio de color una iba por delante de la otra y el
	   límite entre ambas se veía como una costura. Comparten fondo, así que
	   tienen que moverse a la vez. */
	transition:background-color .18s linear,color .18s linear;
	padding:clamp(84px,11vh,150px) 0 clamp(90px,12vh,160px);
	/* clip en vez de hidden, con margen: el contenido sigue recortado en el
	   borde, pero la hélice del fondo puede rebasar la sección y continuar
	   sobre la siguiente, que comparte el mismo fondo. */
	/* SIN recorte. Se probaron dos rondas de `overflow:clip` con margen y la
	   hélice seguía saliendo cortada: cualquier margen es un número fijo que
	   hay que mantener a mano cuando cambia el desbordamiento, y basta con que
	   se quede corto para que el corte vuelva.
	   Ya no hace falta recortar aquí: el carrusel recorta lo suyo
	   (.p7cf-marco) y cada tarjeta de producto la suya, que es lo único que
	   desbordaba. Y el desplazamiento horizontal de la página lo contienen html
	   y body con overflow-x:clip. */
	isolation:isolate;

	--p7-gut:clamp(22px,5vw,110px);
	/* Estos tokens visten el INTERIOR oscuro de las tarjetas — caras del
	   cilindro y tarjetas de producto—, que siguen siendo oscuras a
	   propósito, sin depender del fondo de la sección (que es blanco). */
	--p7-ink:#F5F4F0;
	--p7-ink-soft:rgba(245,244,240,.62);
	--p7-hair:rgba(245,244,240,.14);
	--p7-champagne:#B5A58E;
	/* Hilo y tinta para lo que va DIRECTO sobre el fondo de la sección, no
	   dentro de una tarjeta: se derivan de --atlas-ink para seguir la rampa
	   de color, con su valor claro de reserva. */
	--p7-hair-bg:rgba(10,10,11,.16);
	--p7-display:'Butler',Georgia,serif;
	--p7-sans:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
	--p7-ease-out:cubic-bezier(.23,1,.32,1);
	--p7-ease:cubic-bezier(.4,0,.2,1);
}

/* --------------------------------------------------------------------------
   ADN oculto

   Normalmente no se ve nada. Al mover el ratón, una zona VERTICAL de bordes
   difuminados revela la hélice bajo el puntero y la sigue en los dos ejes
   (protocolos.js escribe --dna-x y --dna-y; la forma la hace el degradado).

   Son dos capas y no una imagen suelta por una razón concreta: el archivo de
   origen es blanco sobre transparente y esta sección tiene el fondo blanco.
   Revelado tal cual era blanco sobre blanco —invisible, aunque el enmascarado
   funcionase, que es justo lo que se veía—. Ahora la hélice sólo aporta la
   FORMA (va de máscara sobre .p7deck-dna__ink) y el color lo pone la capa de
   debajo, en champagne, que sí contrasta con el fondo.

   Los -150px arriba y abajo la dejan rebasar la sección; el clip-margin de
   .p7deck es lo que permite que eso se pinte en vez de cortarse en el borde.
   -------------------------------------------------------------------------- */
/* El tramo que la hélice acompaña: de donde empiezan los productos a donde
   terminan los pilares. Es el contenedor posicionado contra el que se ancla el
   fondo, y por eso el fondo cubre ese rango EXACTO a cualquier ancho, sin
   números que mantener a mano. */
.p7deck-tramo{position:relative}

/* inset:0 — ni un píxel de más ni de menos que el tramo. */
.p7deck-dna{
	position:absolute;inset:0;z-index:1;
	pointer-events:none;
	/* Fuera de cuadro hasta el primer movimiento real del ratón. */
	--dna-x:-9999px;
	--dna-y:50%;
	-webkit-mask-image:radial-gradient(330px 620px at var(--dna-x) var(--dna-y),
		#000 0%,#000 30%,rgba(0,0,0,0) 100%);
	        mask-image:radial-gradient(330px 620px at var(--dna-x) var(--dna-y),
		#000 0%,#000 30%,rgba(0,0,0,0) 100%);
}

/* La imagen de la hélice NO se nombra aquí: la escribe PHP en el atributo
   style de este mismo elemento (parts/protocolos.php). Un url() que llega por
   variable se resuelve contra la hoja de estilo que lo usa —o sea, contra
   /assets/css/—, no contra el documento, y la ruta terminaba en
   /assets/css/assets/images/…, que no existe: la máscara se quedaba vacía y
   el elemento entero, invisible. En el atributo style la ruta se resuelve
   contra el documento, que es lo que se espera. */
.p7deck-dna__ink{
	position:absolute;inset:0;display:block;
	/* Grafito, no champagne: en champagne la hélice se leía como un elemento
	   de marca metido en medio de la composición. En la tinta de la sección
	   es lo que tiene que ser —una textura de fondo— y además sigue la rampa
	   de color del scroll en vez de ser un tono fijo. */
	background:var(--atlas-ink,#0A0A0C);
	opacity:.34;
	/* `contain` y no `cover`: con cover, en una caja más alta que la
	   proporción del archivo, el navegador lo ampliaba para rellenar y la
	   hélice se veía a la vez recortada y con el grano muy grande. */
	-webkit-mask-repeat:no-repeat;
	        mask-repeat:no-repeat;
	-webkit-mask-position:center;
	        mask-position:center;
	/* `100% auto` — de lado a lado. La hélice ocupa TODO el ancho del tramo y
	   el alto sale solo de su proporción, así que no se recorta por los lados,
	   que es lo que se pedía. Con `contain` entraba completa pero dejaba aire a
	   izquierda y derecha; con `cover` llenaba pero cortaba los extremos. */
	/* Dos capas: la hélice ocupa todo el ancho y el degradado la cubre entera.
	   `intersect` deja pasar sólo donde AMBAS son opacas, que es lo que hace
	   que la hélice se desvanezca hacia los extremos en vez de cortarse. */
	-webkit-mask-size:100% auto,100% 100%;
	        mask-size:100% auto,100% 100%;
	-webkit-mask-composite:source-in;
	        mask-composite:intersect;
}

/* Sin ratón no hay nada que seguir. */
@media (hover:none){ .p7deck-dna{display:none} }

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */
.p7deck-head{position:relative;z-index:2;padding:0 var(--p7-gut)}
.p7deck-title{
	margin:0;
	font-family:var(--p7-display);
	font-weight:300;
	font-size:clamp(2.4rem,6.4vw,7.4rem);
	line-height:1.02;letter-spacing:-.028em;
	/* Visible por sí mismo. Antes era opacity:var(--rs,0) y lo revelaba
	   protocolos.js al terminar de armarlo con partículas; ese sistema se
	   retiró al pasar los títulos al efecto común, y sin nadie que escribiera
	   --rs el título se quedaba en opacidad 0. Un título no puede depender de
	   un script para verse. */
	opacity:1;
}
.p7deck-lede{
	margin:clamp(20px,2.2vw,34px) 0 0;
	max-width:46ch;
	font-family:var(--p7-sans);
	font-weight:300;
	font-size:clamp(16.5px,1.44vw,24px);
	line-height:1.58;
	/* No usa --p7-ink-soft: ese token viste el INTERIOR oscuro de las
	   tarjetas. La bajada vive directo sobre el fondo de la sección
	   (blanco), así que necesita su propio tono, derivado de --atlas-ink. */
	color:var(--atlas-ink-soft,rgba(10,10,11,.66));
	/* La misma transición que .p7deck: la sección entera cambia de color a la
	   vez cuando el scroll mueve la rampa, sin que una parte se adelante. */
	transition:color .18s linear;
	text-wrap:pretty;
}

.screen-reader-text{
	position:absolute;width:1px;height:1px;overflow:hidden;
	clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
}

/* --------------------------------------------------------------------------
   MÓVIL
   -------------------------------------------------------------------------- */
@media (max-width:640px){
	.p7deck{padding:clamp(66px,9vh,100px) 0 clamp(70px,9vh,110px)}
	.p7deck-title{font-size:clamp(2.1rem,9.6vw,3rem)}
	.p7deck-lede{font-size:16.5px}
}