/* RDI Cyber Rincón — lo propio de la landing. La base (colores, letras, secciones, botones) es la de la landing de la
   suscripción (rdi-fichas/assets/sus-v2/sus-v2.css). El comienzo y el cierre son la placa de Male hecha página: fondo
   rosa del manual con grano, papel picado, estrellitas y rulos; letras tipo sticker (borde blanco grueso y sombra
   #A5305A corrida abajo a la izquierda); la cinta ondulada; la tarjeta blanca de borde rosa con su sombra rosa clara;
   el botón con relieve; Male con el gorrito apoyada en la tarjeta; el arcoíris abajo a la izquierda. */

.cyb-main {
	--cyb-fondo: #FAC4D8;
	--cyb-rosa: #F25C92;
	--cyb-rosa-claro: #F7A9C6;
	--cyb-sombra: #A5305A;
	--cyb-lila: #9B7BB8;
	--cyb-tinta: #6A4E7D;
	--cyb-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- avisos para administradoras */
.cyb-aviso-admin { margin: 0; padding: 10px 16px; background: #FFF4CC; color: #5A4A00; font-size: 14px; text-align: center; }
.cyb-aviso-admin--rojo { background: #FFE1E1; color: #8A1F1F; font-weight: 700; }

/* ---------------------------------------------------------------- el fondo de la placa (comienzo y cierre) */
.sus-main .cyb-hero,
.sus-main .cyb-cierre {
	position: relative;
	overflow: hidden;
	background-color: var(--cyb-fondo);
	background-image:
		radial-gradient(circle at 12% 18%, #FFFFFF 0 5px, transparent 6px),
		radial-gradient(circle at 88% 12%, #FFFFFF 0 7px, transparent 8px),
		radial-gradient(circle at 6% 78%, #F7DA83 0 6px, transparent 7px),
		radial-gradient(circle at 94% 86%, #F79DBE 0 9px, transparent 10px),
		radial-gradient(circle at 52% 6%, #FFFFFF 0 4px, transparent 5px),
		radial-gradient(circle at 40% 94%, #DCC3EB 0 5px, transparent 6px),
		var(--cyb-grano);
	color: #FFFFFF;
	border-top: 0;
}
/* la base pone position: relative a todo lo que va adentro del comienzo y del cierre: el fondo va de nuevo atrás */
.sus-main .cyb-hero > .cyb-papel,
.sus-main .cyb-hero > .cyb-deco,
.sus-main .cyb-cierre > .cyb-papel,
.sus-main .cyb-cierre > .cyb-deco,
.cyb-sorteo-b > .cyb-papel {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.cyb-papel {
	background-image:
		linear-gradient(35deg, transparent 47%, #A4FFFB 47% 53%, transparent 53%),
		linear-gradient(-25deg, transparent 47%, #F7DA83 47% 53%, transparent 53%),
		linear-gradient(60deg, transparent 47%, #C49BDE 47% 53%, transparent 53%),
		linear-gradient(10deg, transparent 47%, #FFFFFF 47% 53%, transparent 53%);
	background-size: 14px 6px, 12px 6px, 14px 6px, 10px 5px;
	background-repeat: no-repeat;
	background-position: 22% 30%, 78% 64%, 40% 92%, 64% 14%;
	opacity: .9;
}
.cyb-rulo { position: absolute; width: 220px; height: auto; fill: none; stroke: var(--cyb-rosa-claro); stroke-width: 9; stroke-linecap: round; }
.cyb-rulo--1 { top: -34px; left: -60px; }
.cyb-rulo--2 { right: -60px; bottom: -30px; transform: rotate(180deg); }
.cyb-chispa { position: absolute; display: block; width: 24px; fill: #FFFFFF; }
.cyb-chispa svg { display: block; width: 100%; height: auto; }
.cyb-chispa--1 { top: 10%; left: 5%; width: 34px; }
.cyb-chispa--2 { top: 6%; right: 26%; width: 18px; }
.cyb-chispa--3 { bottom: 10%; left: 3%; width: 40px; }
.cyb-chispa--4 { bottom: 14%; right: 6%; width: 30px; }
.cyb-chispa--5 { top: 46%; right: 2%; width: 16px; }

/* ---------------------------------------------------------------- el comienzo */
.sus-main .cyb-hero { padding: 28px 0 44px; }
.cyb-hero__grilla { position: relative; z-index: 1; display: grid; gap: 26px; align-items: center; }
.cyb-hero__oferta { text-align: center; }
.cyb-hero__h1 { display: flex; flex-direction: column; align-items: center; margin: 0; font-weight: normal; line-height: 1; }

/* letras tipo sticker: borde blanco grueso por fuera (paint-order) y la sombra de todo el sticker abajo a la izquierda */
.cyb-titulo,
.cyb-pct__n,
.cyb-pct__signo,
.cyb-pct__off,
.cyb-sorteo-b__titulo {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: normal;
	color: var(--cyb-rosa);
	-webkit-text-stroke: .15em #FFFFFF;
	paint-order: stroke fill;
	filter: drop-shadow(-.04em .055em 0 var(--cyb-sombra));
}
.cyb-titulo { font-size: clamp(40px, 11vw, 64px); letter-spacing: .5px; }
.cyb-pct { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.cyb-pct__n { font-size: clamp(124px, 35vw, 190px); line-height: .92; -webkit-text-stroke-width: .1em; filter: drop-shadow(-.03em .035em 0 var(--cyb-sombra)); }
.cyb-pct__lado { display: flex; flex-direction: column; align-items: flex-start; line-height: .92; }
.cyb-pct__signo { font-size: clamp(56px, 15vw, 84px); -webkit-text-stroke-width: .13em; }
.cyb-pct__off { font-size: clamp(32px, 8.6vw, 48px); -webkit-text-stroke-width: .16em; }

/* la cinta ondulada «En la suscripción anual», un poquito torcida como en la placa */
.cyb-cinta {
	display: inline-block;
	position: relative;
	margin-top: 14px;
	padding: 14px 34px 16px;
	font-family: var(--font-text);
	font-size: clamp(19px, 5.2vw, 25px);
	font-weight: 400;
	line-height: 1.15;
	color: #FFFFFF;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 80' preserveAspectRatio='none'%3E%3Cpath fill='%23F25C92' d='M0 10 Q18.75 2 37.5 10 T75 10 Q93.75 2 112.5 10 T150 10 Q168.75 2 187.5 10 T225 10 Q243.75 2 262.5 10 T300 10 Q318.75 2 337.5 10 T375 10 Q393.75 2 412.5 10 T450 10 Q468.75 2 487.5 10 T525 10 Q543.75 2 562.5 10 T600 10 L600 70 Q581.25 78 562.5 70 T525 70 Q506.25 78 487.5 70 T450 70 Q431.25 78 412.5 70 T375 70 Q356.25 78 337.5 70 T300 70 Q281.25 78 262.5 70 T225 70 Q206.25 78 187.5 70 T150 70 Q131.25 78 112.5 70 T75 70 Q56.25 78 37.5 70 T0 70 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	transform: rotate(2deg);
}
.cyb-cinta strong { font-family: var(--font-display); font-weight: normal; letter-spacing: .5px; }

/* la pastilla con el logo y las fechas: «DEL 2 AL» en lila y «4 DE NOVIEMBRE» en rosa */
.cyb-pildora {
	display: inline-flex; align-items: center; gap: 14px;
	margin: 20px 0 0; padding: 6px 18px 6px 14px;
	background: #FFFFFF; border: 2px solid var(--cyb-rosa); border-radius: 999px;
	color: var(--cyb-lila); font-size: 15px; letter-spacing: .05em; text-transform: uppercase;
}
.cyb-pildora img { display: block; width: 76px; height: auto; filter: brightness(0) saturate(100%) invert(53%) sepia(65%) saturate(3020%) hue-rotate(310deg) brightness(98%) contrast(92%); }
.cyb-pildora span { padding-left: 14px; border-left: 2px solid var(--cyb-rosa); }
.cyb-pildora strong { color: var(--cyb-rosa); font-weight: 400; }

/* la tarjeta blanca con el precio, Male apoyada en el borde y el arcoíris atrás */
.cyb-hero__tarjeta { position: relative; padding-top: 74px; max-width: 430px; margin: 0 auto; width: 100%; }
.cyb-male { position: absolute; z-index: 3; right: -10px; top: 0; width: 150px; height: auto; pointer-events: none; }
.cyb-precio {
	position: relative; z-index: 2;
	background: #FFFFFF;
	border: 5px solid var(--cyb-rosa);
	border-radius: 34px;
	padding: 26px 22px 26px;
	text-align: center;
	color: var(--rincon-dark);
	box-shadow: -12px 12px 0 var(--cyb-rosa-claro);
}
.cyb-precio__antes { margin: 0; font-size: 20px; color: var(--cyb-lila); }
.cyb-precio__antes s,
.cyb-cierre__precio s { text-decoration-color: var(--cyb-rosa); text-decoration-thickness: 3px; }
.cyb-precio__ahora { margin: 0; font-family: var(--font-text); font-weight: 700; font-size: clamp(52px, 14vw, 74px); line-height: 1.08; color: var(--cyb-rosa); }
.cyb-precio__detalle { margin: 4px 0 0; font-size: 16px; color: var(--rincon-dark); }
.cyb-precio__usd { margin: 6px 0 0; font-size: 17px; color: var(--cyb-lila); }
.cyb-arco { position: absolute; z-index: 1; left: -34px; bottom: -40px; width: 120px; }
.cyb-arco svg { display: block; width: 100%; height: auto; }

/* el botón con relieve, como el de la placa (sin flecha) */
.sus-main .cyb-boton {
	margin-top: 18px;
	min-height: 58px;
	padding: 14px 30px;
	border-radius: 999px;
	background: var(--cyb-rosa);
	color: #FFFFFF;
	font-size: 20px;
	letter-spacing: .07em;
	text-transform: uppercase;
	box-shadow: 0 7px 0 var(--cyb-sombra);
}
.sus-main .cyb-boton::after { display: none; }
.sus-main .cyb-boton:hover { background: #EC4F87; color: #FFFFFF; transform: translateY(2px); box-shadow: 0 5px 0 var(--cyb-sombra); }
.sus-main .cyb-boton:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--cyb-sombra); }
.cyb-precio .cyb-boton { width: 100%; }

/* ---------------------------------------------------------------- la cuenta regresiva */
.cyb-cuenta { padding: 22px 16px 26px; background: #FDEAF1; text-align: center; }
.cyb-cuenta__titulo { margin: 0 0 12px; font-family: var(--font-display); font-size: clamp(22px, 5.6vw, 28px); color: var(--cyb-rosa); }
.cyb-cuenta__items { display: grid; grid-template-columns: repeat(4, minmax(0, 110px)); justify-content: center; gap: 10px; margin: 0; }
.cyb-cuenta__item { display: flex; flex-direction: column; align-items: center; padding: 10px 4px 8px; border-radius: 14px; background: var(--cyb-rosa); color: #FFFFFF; box-shadow: 0 5px 0 var(--cyb-sombra); }
.cyb-cuenta__n { font-size: clamp(30px, 8vw, 46px); line-height: 1; font-variant-numeric: tabular-nums; font-weight: 700; }
.cyb-cuenta__t { margin-top: 4px; font-size: 13px; }
.cyb-cuenta.is-fin .cyb-cuenta__items { display: none; }

/* ---------------------------------------------------------------- todos los cursos, de a seis */
.cyb-cursos { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cyb-curso { display: flex; flex-direction: column; overflow: hidden; background: #FFFFFF; border-radius: 16px; box-shadow: 0 4px 16px rgba(58, 58, 58, .07); }
.cyb-curso.is-nuevo { animation: cyb-aparece .35s ease both; }
.cyb-curso__foto { position: relative; display: block; aspect-ratio: 1 / 1; background: #FDEAF1; }
.cyb-curso__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cyb-curso__tipo { position: absolute; left: 8px; top: 8px; padding: 3px 10px; border-radius: 999px; background: #FFFFFF; color: var(--compra-hover); font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.cyb-curso__nombre { display: -webkit-box; padding: 10px 12px 14px; overflow: hidden; color: var(--rincon-dark); font-size: 15px; line-height: 1.3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.cyb-cursos__mas { margin: 26px 0 0; text-align: center; }
.sus-main .cyb-cursos__boton {   /* .sus-main: el tema pinta todos los <button> */
	min-height: 50px; padding: 12px 28px;
	border: 2px solid var(--cyb-rosa); border-radius: 999px;
	background: #FFFFFF; color: var(--cyb-rosa);
	font-family: var(--font-text); font-size: 17px; font-weight: 700; cursor: pointer;
}
.sus-main .cyb-cursos__boton span { font-weight: 400; color: var(--cyb-tinta); }
.sus-main .cyb-cursos__boton:hover,
.sus-main .cyb-cursos__boton:focus { background: #FFF0F6; color: var(--cyb-rosa); border-color: var(--cyb-rosa); }
.sus-main .cyb-cursos__boton:focus-visible { outline: 3px solid var(--cyb-lila); outline-offset: 3px; }
@keyframes cyb-aparece { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- el ahorro */
.cyb-ahorro { display: inline-block; margin: 6px 0 0; padding: 4px 14px; border: 2px solid #FAC4D8; border-radius: 999px; background: #FFF5F9; color: var(--cyb-sombra); font-weight: 700; }

/* ---------------------------------------------------------------- el sorteo, versión A: el banner de Male */
.cyb-sorteo-a__banner { display: block; overflow: hidden; border-radius: 20px; box-shadow: -10px 10px 0 var(--cyb-rosa-claro); }
.cyb-sorteo-a__banner img { display: block; width: 100%; height: auto; }
.cyb-sorteo-a__texto { max-width: 680px; margin: 22px auto 0; color: var(--rincon-dark); font-size: 18px; line-height: 1.5; text-align: center; }

/* ---------------------------------------------------------------- el sorteo, versión B: la franja de fiesta */
.cyb-sorteo-b {
	position: relative; overflow: hidden;
	padding: 48px 0 56px;
	background-color: #EBDDF6;
	background-image: radial-gradient(circle at 8% 20%, #FFFFFF 0 5px, transparent 6px), radial-gradient(circle at 92% 80%, #FFFFFF 0 7px, transparent 8px), radial-gradient(circle at 70% 10%, #F7DA83 0 5px, transparent 6px), var(--cyb-grano);
}
.cyb-sorteo-b__grilla { position: relative; z-index: 1; display: grid; gap: 30px; align-items: center; }
.cyb-sorteo-b__texto { text-align: center; color: var(--rincon-dark); }
.cyb-sorteo-b__antes { margin: 0 0 6px; font-family: var(--font-text); font-size: 20px; font-weight: 700; color: var(--compra-hover); }   /* en Blenny la Y mayúscula se lee como V */
.cyb-sorteo-b__titulo { margin: 0; font-size: clamp(36px, 9.5vw, 58px); line-height: 1.05; }
.cyb-sorteo-b__bajada { margin: 16px 0 0; font-size: 18px; line-height: 1.5; }
.cyb-sorteo-b__premios { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.cyb-sorteo-b__premios li { padding: 6px 14px; border-radius: 999px; background: #FFFFFF; color: var(--rincon-dark); font-size: 15px; box-shadow: 0 3px 0 #D6C1E8; }
.cyb-sorteo-b__premios li::before { content: "✓"; margin-right: 6px; color: var(--cyb-rosa); font-weight: 700; }
.cyb-pildora--sorteo { margin-top: 20px; color: var(--cyb-tinta); text-transform: none; letter-spacing: 0; font-size: 15px; }
.cyb-pildora--sorteo span { padding-left: 0; border-left: 0; }
.cyb-sorteo-b__nota { margin: 12px 0 0; font-size: 14px; color: #6A6A6A; }
.cyb-sorteo-b__foto { position: relative; justify-self: center; max-width: 300px; padding: 12px 12px 36px; border-radius: 6px; background: #FFFFFF; box-shadow: 0 16px 30px rgba(106, 78, 125, .25); transform: rotate(-3deg); }
.cyb-sorteo-b__foto img { display: block; width: 100%; height: auto; border-radius: 3px; }
.cyb-cinta-adhesiva { position: absolute; z-index: 1; top: -14px; left: 50%; width: 110px; height: 30px; background: rgba(247, 218, 131, .85); transform: translateX(-50%) rotate(4deg); }

/* ---------------------------------------------------------------- el sorteo, versión C: el ticket */
.cyb-ticket {
	position: relative;
	display: grid; grid-template-columns: 92px minmax(0, 1fr);
	overflow: hidden;
	background: #FFFFFF; border: 4px solid var(--cyb-rosa); border-radius: 24px;
	box-shadow: -12px 12px 0 var(--cyb-rosa-claro);
}
.cyb-ticket::before,
.cyb-ticket::after { content: ""; position: absolute; left: 74px; width: 32px; height: 32px; border: 4px solid var(--cyb-rosa); border-radius: 50%; background: #FFFFFF; }
.cyb-ticket::before { top: -20px; }
.cyb-ticket::after { bottom: -20px; }
.cyb-ticket__talon { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 6px; border-right: 3px dashed #FFFFFF; background: var(--cyb-rosa); color: #FFFFFF; text-align: center; }
.cyb-ticket__eti { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cyb-ticket__dia { font-family: var(--font-display); font-size: 56px; line-height: 1; }
.cyb-ticket__mes { font-size: 18px; letter-spacing: .1em; text-transform: uppercase; }
.cyb-ticket__vivo { margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: #FFFFFF; color: var(--cyb-rosa); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.cyb-ticket__cuerpo { padding: 22px 20px 20px 26px; color: var(--rincon-dark); }
.cyb-ticket__cuerpo p { margin: 0 0 12px; line-height: 1.5; }
.cyb-ticket__titulo { margin: 0 0 10px; font-family: var(--font-display); font-weight: normal; font-size: clamp(24px, 6vw, 30px); line-height: 1.15; color: var(--cyb-rosa); }
.cyb-ticket__premios { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.cyb-ticket__premios li { padding: 4px 12px; border-radius: 999px; background: #F3EAFA; color: var(--cyb-tinta); font-size: 14px; }
.cyb-ticket__nota { font-size: 13px; color: #6A6A6A; }
.cyb-ticket__foto { display: none; }

/* ---------------------------------------------------------------- el cierre: Male sobre una tarjeta, con fondo de fiesta */
.sus-main .cyb-cierre { padding: 120px 0 64px; }
.cyb-cierre__tarjeta {
	position: relative;
	padding: 104px 22px 30px;
	background: #FFFFFF;
	border: 5px solid var(--cyb-rosa);
	border-radius: 34px;
	box-shadow: -12px 12px 0 var(--cyb-rosa-claro);
	text-align: center;
	color: var(--rincon-dark);
}
.cyb-cierre__male { position: absolute; top: -112px; left: 50%; width: 210px; height: auto; transform: translateX(-50%); }
.cyb-cierre__titulo { margin: 0; font-family: var(--font-display); font-weight: normal; font-size: clamp(25px, 6.4vw, 34px); line-height: 1.25; letter-spacing: .3px; color: var(--compra); text-wrap: balance; }
.cyb-cierre__titulo span { color: var(--cyb-rosa); }
.cyb-cierre__precio { margin: 16px 0 0; font-size: 18px; }
.cyb-cierre__precio s { display: block; color: var(--cyb-lila); }
.cyb-cierre__precio span { white-space: nowrap; }
.cyb-cierre__precio strong { color: var(--cyb-rosa); font-size: 36px; font-weight: 700; }
.cyb-cierre__fin { margin: 18px 0 0; font-weight: 700; color: var(--compra-hover); }

/* ---------------------------------------------------------------- compu */
@media (min-width: 900px) {
	.sus-main .cyb-hero { padding: 44px 0 64px; }
	.cyb-hero__grilla { grid-template-columns: 1.15fr 1fr; gap: 56px; }
	.cyb-titulo { font-size: 76px; white-space: nowrap; }
	.cyb-pct__n { font-size: 224px; }
	.cyb-pct__signo { font-size: 100px; }
	.cyb-pct__off { font-size: 56px; }
	.cyb-cinta { font-size: 29px; padding: 16px 44px 18px; }
	.cyb-hero__tarjeta { padding-top: 0; margin: 20px 0 0; max-width: 460px; }
	.cyb-precio__detalle { font-size: 18px; }
	.cyb-male { width: 230px; right: -158px; top: 70px; }
	.cyb-arco { left: -86px; bottom: -64px; width: 170px; }
	.cyb-rulo { width: 320px; }
	.cyb-cursos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
	.cyb-sorteo-b { padding: 64px 0; }
	.cyb-sorteo-b__grilla { grid-template-columns: 1.25fr .75fr; gap: 56px; }
	.cyb-sorteo-b__texto { text-align: left; }
	.cyb-sorteo-b__premios { justify-content: flex-start; }
	.cyb-ticket { grid-template-columns: 120px minmax(0, 1fr) 220px; }
	.cyb-ticket::before, .cyb-ticket::after { left: 102px; }
	.cyb-ticket__dia { font-size: 70px; }
	.cyb-ticket__foto { display: block; background: #FDEAF1; }
	.cyb-ticket__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
	.sus-main .cyb-cierre { padding: 140px 0 80px; }
	.cyb-cierre__tarjeta { padding: 120px 48px 36px; }
	.cyb-cierre__male { top: -128px; width: 240px; }
	.cyb-cierre__precio s { display: inline; margin-right: 8px; }
}
/* en la compu ancha, cada «Ver más» suma una fila de seis */
@media (min-width: 1100px) {
	.cyb-cursos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
	.cyb-curso__nombre { padding: 8px 10px 12px; font-size: 14px; }
	.cyb-curso__tipo { font-size: 11px; padding: 2px 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.sus-main .cyb-boton { transition: none; }
	.cyb-curso.is-nuevo { animation: none; }
}