/* =====================================================================
   OLIMPO · PERGAMINO DE AVISOS (aspecto de papiro)
   Paleta y tipografías de la web: dorado #FDC600, negro #080708,
   Cinzel (títulos) y Cormorant Garamond (texto), curva 0.16,1,0.3,1.

   El tamaño se cambia con --olp-ancho (y el resto se adapta).
   La POSICIÓN no va aquí: se pone en los ajustes del módulo Código
   de Divi (Avanzado → Posición), uno por dispositivo.
   ===================================================================== */

.olp {
	--olp-ancho: clamp(190px, 16vw, 240px);         /* cerrado */
	--olp-ancho-abierto: var(--olp-ancho);          /* abierto (en móvil, más ancho) */
	--olp-espera: 0s;                               /* pausa entre ensanchar y desenrollar */
	--olp-rollo: 32px;                              /* grosor de cada rollo, enrollado */
	--olp-rollo-abierto: 28px;                      /* grosor de cada rollo, abierto */
	--olp-oro: #FDC600;
	--olp-oro-claro: #FFE27A;
	--olp-oro-oscuro: #8C6A00;
	--olp-tinta: #1E150C;
	--olp-tinta-suave: #6A4C24;
	--olp-papel: #DEC48C;           /* papiro: tono paja tostado */
	--olp-papel-claro: #ECD8A8;
	--olp-papel-medio: #C8A66A;
	--olp-papel-borde: #A4813F;
	--olp-fibra-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.42' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.29 0 0 0 0 0.1 0 0 0 1.6 -0.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
	--olp-fibra-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3 0.005' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.29 0 0 0 0 0.1 0 0 0 0.85 -0.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
	--olp-madera: #2B1C10;
	--olp-lacre: #9B1F1C;
	--olp-curva: cubic-bezier(0.16, 1, 0.3, 1);
	--olp-abrir: 1.1s;

	position: relative;
	display: block;
	width: var(--olp-ancho);
	margin: 0;
	/* Al enrollar: primero sube la hoja y luego se estrecha */
	transition: width .45s var(--olp-curva) .8s;
	filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55));
	font-size: 16px;
	line-height: 1;
	text-align: center;
	-webkit-tap-highlight-color: transparent;
}

.olp.is-abierto {
	width: var(--olp-ancho-abierto);
	transition-delay: 0s;
}

.olp *,
.olp *::before,
.olp *::after {
	box-sizing: border-box;
}

/* Si el filtro de párrafos envuelve el pergamino en un <p>, sin márgenes */
p:has(> .olp) {
	margin: 0 !important;
	padding: 0 !important;
}

/* Texto solo para lectores de pantalla */
.olp .olp-oculto {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- EL ROLLO (pergamino cerrado / parte de arriba) ---------- */
.olp .olp-rollo {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: default;
	appearance: none;
	-webkit-appearance: none;
}

.olp .olp-boton {
	cursor: pointer;
}

/* Aviso enrollado: el rollo entero es el botón para abrirlo */
.olp[data-estado="aviso"]:not(.is-abierto) .olp-boton {
	position: static;
}
.olp[data-estado="aviso"]:not(.is-abierto) .olp-boton::after {
	content: '';
	position: absolute;
	z-index: 5;
	inset: -4px -8px;
}

.olp .olp-boton:focus-visible {
	outline: 2px solid var(--olp-oro);
	outline-offset: 6px;
	border-radius: 4px;
}

/* Los dos rollos de papiro (sin varas: el propio papiro enrollado).
   Cerrado: los dos rollos juntos, como un papiro enrollado desde
   los dos extremos. Abierto: uno arriba y otro abajo, como se leía.
   Al desenrollarse, los rollos adelgazan un poco. */
.olp .olp-vara {
	position: relative;
	z-index: 2;
	display: block;
	height: var(--olp-rollo);
	margin: 0 -2px;
	border-radius: 3px;
	/* Cilindro: brillo arriba, sombra abajo, fibras del papiro */
	background:
		linear-gradient(180deg, rgba(255, 246, 220, 0) 18%, rgba(255, 246, 220, .45) 28%, rgba(255, 246, 220, 0) 40%),
		var(--olp-fibra-v),
		var(--olp-fibra-h),
		linear-gradient(180deg, #5E4320 0%, #A9844A 9%, var(--olp-papel-claro) 30%, var(--olp-papel) 50%, var(--olp-papel-medio) 70%, #8C6A36 88%, #4E3719 100%);
	box-shadow: 0 4px 8px rgba(0, 0, 0, .45);
	transition: height .8s var(--olp-curva), border-radius .8s var(--olp-curva);
}

/* Desenrollado, cada rollo tiene menos papiro y adelgaza */
.olp.is-abierto .olp-vara {
	--olp-rollo: var(--olp-rollo-abierto);
}

/* Extremos del rollo: la cara cortada, con la espiral de las vueltas
   del papiro. Va enrasada con el cilindro (media cara dentro). */
.olp .olp-pomo {
	position: absolute;
	top: 0;
	bottom: 0;
	width: calc(var(--olp-rollo) * .34);
	border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='c' cx='42%25' cy='38%25' r='65%25'%3E%3Cstop offset='0' stop-color='%23F1DFB4'/%3E%3Cstop offset='.7' stop-color='%23D9BC84'/%3E%3Cstop offset='1' stop-color='%23A9844C'/%3E%3C/radialGradient%3E%3CradialGradient id='s' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='.75' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%233A2610' stop-opacity='.45'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='url(%23c)'/%3E%3Cpath d='M57.0 50.0 57.0 51.0 56.9 51.9 56.7 52.9 56.3 53.8 55.8 54.7 55.2 55.5 54.5 56.2 53.7 56.8 52.8 57.4 51.8 57.8 50.7 58.0 49.6 58.1 48.5 58.1 47.4 57.9 46.3 57.6 45.3 57.1 44.3 56.5 43.4 55.7 42.6 54.9 42.0 53.9 41.4 52.8 41.1 51.6 40.8 50.4 40.8 49.2 40.9 47.9 41.1 46.7 41.6 45.5 42.2 44.3 42.9 43.3 43.9 42.3 44.9 41.5 46.1 40.8 47.3 40.2 48.6 39.9 50.0 39.7 51.4 39.7 52.8 39.9 54.2 40.2 55.5 40.8 56.7 41.5 57.9 42.5 58.9 43.5 59.8 44.7 60.5 46.1 61.0 47.5 61.3 49.0 61.5 50.5 61.4 52.1 61.1 53.6 60.6 55.1 59.9 56.5 59.0 57.9 57.9 59.1 56.7 60.1 55.3 61.0 53.8 61.7 52.2 62.2 50.6 62.5 48.9 62.6 47.2 62.4 45.5 62.0 43.9 61.4 42.4 60.5 41.0 59.5 39.7 58.2 38.6 56.8 37.7 55.3 37.0 53.6 36.6 51.8 36.3 50.0 36.4 48.2 36.6 46.3 37.2 44.5 37.9 42.8 38.9 41.2 40.2 39.7 41.6 38.4 43.2 37.3 44.9 36.4 46.7 35.7 48.7 35.3 50.7 35.2 52.7 35.3 54.6 35.7 56.5 36.4 58.4 37.3 60.1 38.5 61.6 39.9 62.9 41.5 64.0 43.2 64.9 45.2 65.5 47.2 65.8 49.3 65.9 51.4 65.6 53.6 65.1 55.7 64.3 57.7 63.2 59.6 61.9 61.4 60.3 62.9 58.5 64.3 56.6 65.4 54.5 66.2 52.3 66.8 50.0 67.0 47.7 66.9 45.4 66.6 43.2 65.9 41.1 64.9 39.1 63.7 37.3 62.1 35.7 60.4 34.4 58.4 33.3 56.3 32.5 54.0 32.0 51.6 31.9 49.2 32.1 46.7 32.6 44.3 33.4 42.0 34.5 39.8 36.0 37.7 37.7 35.9 39.6 34.3 41.8 33.0 44.1 31.9 46.6 31.2 49.1 30.8 51.7 30.8 54.3 31.1 56.8 31.8 59.3 32.8 61.6 34.1 63.7 35.7 65.5 37.6 67.1 39.8 68.4 42.1 69.4 44.6 70.1 47.3 70.3 50.0 70.2 52.7 69.8 55.5 69.0 58.1 67.8 60.6 66.3 63.0 64.4 65.1 62.3 67.0 60.0 68.6 57.4 69.8 54.7 70.8 51.9 71.3 49.0 71.5 46.1 71.2 43.3 70.6 40.6 69.6 38.0 68.2 35.6 66.5 33.4 64.5 31.5 62.2 30.0 59.6 28.8 56.9 27.9 54.0 27.5 51.0 27.5 48.0 27.9 44.9 28.6 42.0 29.8 39.1 31.4 36.5 33.3 34.0 35.5 31.9 38.1 30.0 40.8 28.5 43.8 27.4 46.8 26.6 50.0 26.3 53.2 26.5 56.3 27.0 59.4 28.0 62.3 29.4 65.1 31.1 67.5 33.2 69.7 35.7 71.5 38.4 73.0 41.4 74.0 44.5 74.6 47.8 74.8 51.1 74.5 54.4 73.8 57.7 72.6 60.9 71.0 63.9 69.0 66.6 66.7 69.1 64.0 71.3 61.1 73.0 57.9 74.4 54.6 75.3 51.2 75.8 47.7 75.8 44.2 75.4 40.8 74.5 37.6 73.1 34.5 71.3 31.7 69.1 29.3 66.5 27.1 63.7 25.4 60.5 24.2 57.1 23.3 53.6 23.0 50.0 23.1 46.4 23.8 42.8 24.9 39.3 26.5 36.0 28.5 32.9 30.9 30.1 33.7 27.6 36.8 25.6 40.2 23.9 43.8 22.7 47.5 22.1 51.3 21.9 55.0 22.2 58.8 23.1 62.3 24.4 65.7 26.2 68.8 28.4 71.6 31.1 74.0 34.1 76.0 37.5 77.6 41.0 78.6 44.8 79.2 48.7 79.2 52.6 78.6 56.5 77.6 60.4 76.0 64.0 74.0 67.4 71.5 70.6 68.6 73.3 65.4 75.7 61.8 77.6 58.0 79.1 54.1 80.0 50.0 80.3 45.9 80.2 41.9 79.4 38.0 78.2 34.2 76.4 30.8 74.1 27.7 71.4 24.9 68.2 22.6 64.7 20.8 61.0 19.5 57.0 18.7 52.8 18.6 48.6 18.9 44.4 19.9 40.2 21.4 36.2 23.4 32.4 25.9 29.0 28.9 25.9 32.3 23.2 36.0 21.0 40.0 19.2 44.2 18.1 48.5 17.5 52.9 17.5 57.3 18.1 61.5 19.3 65.6 21.0 69.4 23.3 72.9 26.1 75.9 29.3 78.6 32.9 80.7 36.9 82.3 41.1 83.3 45.5 83.7 50.0 83.5 54.5 82.6 59.0 81.2 63.3 79.2 67.5 76.7 71.3 73.7 74.7 70.2 77.8 66.3 80.3 62.1 82.3 57.7 83.8 53.1 84.6 48.4 84.8 43.8 84.3 39.2 83.3 34.8 81.6 30.6 79.4 26.8 76.6 23.4 73.3 20.4 69.5 18.0 65.4 16.1 61.0 14.8 56.4 14.2 51.6 14.2 46.8 14.9 42.0 16.2 37.3 18.1 32.8 20.6 28.6 23.7 24.8 27.2 21.4 31.2 18.6 35.6 16.2 40.2 14.5 45.0 13.4 50.0 13.0 55.0 13.2 59.9 14.1 64.7 15.7 69.2 17.9 73.4 20.7 77.2 24.0 80.5 27.9 83.3 32.1 85.4 36.7 87.0 41.6 87.9 46.6 88.1 51.7 87.6 56.8 86.5 61.8 84.6 66.7 82.2 71.2 79.1 75.4 75.5 79.2 71.4 82.4 66.9 85.1 62.1 87.1 57.0 88.5 51.8 89.2 46.5 89.1 41.2 88.4 36.1 87.0 31.2 84.8 26.7 82.1 22.5 78.7 18.8 74.9 15.7 70.5 13.2 65.7 11.3 60.7 10.1 55.4 9.7 50.0 9.9 44.6 10.9 39.2 12.6 34.0 15.0 29.1 18.1 24.6 21.7 20.4 25.9 16.8 30.5 13.8 35.5 11.4 40.8 9.7 46.3 8.8 51.9 8.6 57.4 9.1 62.9 10.4 68.1 12.4 73.1 15.1 77.6 18.4 81.7 22.3 85.2 26.8 88.1 31.7 90.3 36.9 91.7 42.4 92.5 48.1 92.4 53.8 91.6 59.5 90.1 65.0 87.8 70.3 84.8 75.3 81.1 79.8 76.9 83.8 72.2 87.2 67.0 89.9 61.6 91.9 55.8 93.2 50.0 93.7 44.1 93.4 38.3 92.3 32.7 90.4 27.4 87.8 22.5 84.5 18.0 80.6 14.1 76.1 10.9 71.1 8.3 65.6 6.5 59.9 5.5 54.0 5.2 48.0 5.8 42.0 7.2 36.1 9.4 30.4 12.3 25.1 15.9 20.2 20.1 15.8 24.9 12.0 30.2 8.9 35.9 6.6 41.8 5.0 47.9 4.2 54.1 4.2 60.2 5.1 66.2 6.8 71.9 9.3 77.2 12.5 82.1 16.4 86.4 21.0 90.0 26.1 93.0 31.6 95.1 37.5 96.5 43.7 97.0 50.0' fill='none' stroke='%238A6532' stroke-width='1.6' stroke-opacity='.75'/%3E%3Ccircle cx='50' cy='50' r='7' fill='%234A3218'/%3E%3Ccircle cx='50' cy='50' r='50' fill='url(%23s)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	box-shadow: 0 0 0 .5px rgba(70, 48, 20, .55);
	transition: width .8s var(--olp-curva);
}

.olp .olp-pomo:first-child { left: calc(var(--olp-rollo) * -.17); }
.olp .olp-pomo:last-child  { right: calc(var(--olp-rollo) * -.17); }

/* Borde del papiro entre los dos rollos: solo se ve abierto */
.olp .olp-papel {
	position: relative;
	z-index: 1;
	display: block;
	height: 0;
	margin: 0;
	background: var(--olp-fibra-h), linear-gradient(180deg, #8F6B36 0%, var(--olp-papel-medio) 100%);
}

.olp.is-abierto .olp-papel {
	height: 3px;
	margin-top: -1px;
}

/* El rollo de abajo va pegado a la hoja (o al rollo de arriba, cerrado) */
.olp .olp-vara--inf {
	margin-top: -1px;
}

/* Cordón rojo que ata el rollo cerrado */
.olp[data-estado="vacio"] .olp-rollo::before {
	content: '';
	position: absolute;
	z-index: 3;
	top: -2px;
	bottom: -2px;
	left: 50%;
	width: 4px;
	margin-left: -2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #5E0F0D, #B3302A 50%, #5E0F0D);
}

/* Lacre con Ω: pergamino sellado, no hay avisos */
.olp .olp-sello {
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
	background: radial-gradient(circle at 38% 32%, #D2453D 0%, var(--olp-lacre) 55%, #5E0F0D 100%);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .5), inset 0 0 0 3px rgba(0, 0, 0, .12);
}

.olp .olp-sello span {
	font-family: 'Cinzel', Georgia, serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: rgba(255, 210, 190, .75);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .35);
}

/* Hay aviso y el visitante lo ha enrollado: el pergamino brilla para invitar a abrirlo */
.olp[data-estado="aviso"]:not(.is-abierto) {
	animation: olp-llamar 2.4s ease-in-out infinite;
}

.olp[data-estado="aviso"]:not(.is-abierto) .olp-vara--inf {
	cursor: pointer;
}

@keyframes olp-llamar {
	0%, 100% { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)) drop-shadow(0 0 0 rgba(253, 198, 0, 0)); }
	50%      { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)) drop-shadow(0 0 12px rgba(253, 198, 0, .9)); }
}

/* ---------- LA HOJA (se desenrolla hacia abajo) ----------
   La altura la anima pergamino.js con la medida exacta de la hoja,
   así el rollo de abajo baja y sube pegado al papiro. */
.olp .olp-hoja-marco {
	display: block;
	height: 0;
	overflow: hidden;
	transition: height var(--olp-abrir) var(--olp-curva);
}

.olp.is-abierto .olp-hoja-marco {
	transition-delay: var(--olp-espera);
}

.olp .olp-hoja {
	position: relative;
	display: block;
	min-height: 0;
	overflow: hidden;
	padding: 0 18px;
	background:
		radial-gradient(ellipse at 50% 40%, rgba(255, 244, 212, .32) 0%, transparent 60%),
		radial-gradient(ellipse at 12% 82%, rgba(150, 105, 40, .2) 0%, transparent 42%),
		radial-gradient(ellipse at 88% 14%, rgba(150, 105, 40, .16) 0%, transparent 38%),
		/* las dos capas de tiras de papiro, cruzadas */
		var(--olp-fibra-h),
		var(--olp-fibra-v),
		/* tiras anchas: la capa horizontal y la vertical se ven como una trama */
		repeating-linear-gradient(180deg, rgba(255, 244, 210, .14) 0 7px, rgba(110, 76, 30, .08) 7px 15px, rgba(255, 244, 210, .07) 15px 19px, rgba(110, 76, 30, .1) 19px 29px),
		repeating-linear-gradient(90deg, rgba(110, 76, 30, .07) 0 10px, rgba(255, 244, 210, .09) 10px 18px, rgba(110, 76, 30, .05) 18px 31px),
		/* unión entre dos hojas pegadas (kollesis) */
		linear-gradient(180deg, transparent 47%, rgba(110, 76, 30, .16) 48%, rgba(255, 244, 210, .18) 49.5%, transparent 51%),
		/* manchas de envejecido */
		radial-gradient(circle at 78% 62%, rgba(120, 80, 30, .16) 0 9px, transparent 22px),
		radial-gradient(circle at 22% 30%, rgba(120, 80, 30, .12) 0 6px, transparent 16px),
		linear-gradient(90deg, var(--olp-papel-medio) 0%, var(--olp-papel) 8%, var(--olp-papel-claro) 50%, var(--olp-papel) 92%, var(--olp-papel-medio) 100%);
	box-shadow: inset 0 8px 10px -6px rgba(80, 50, 15, .45), inset 0 -8px 10px -6px rgba(80, 50, 15, .45);
	color: var(--olp-tinta);
	/* bordes laterales irregulares, como el papiro cortado a mano */
	-webkit-mask:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='52'%3E%3Cpath d='M7 0H2.4L1.6 4 2.9 7 1.2 13 1.9 19 .6 23 2.6 31 1.4 36 .4 40 2.2 45 1.7 49 2.4 52H7Z'/%3E%3C/svg%3E") left top / 7px 52px repeat-y,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='52'%3E%3Cpath d='M0 0H4.6L5.9 5 4.3 9 5.5 16 6.4 21 4.4 27 5.1 33 6.6 38 4.8 44 5.6 49 4.6 52H0Z'/%3E%3C/svg%3E") right top / 7px 52px repeat-y,
		linear-gradient(#000 0 0) center / calc(100% - 13px) 100% no-repeat;
	mask:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='52'%3E%3Cpath d='M7 0H2.4L1.6 4 2.9 7 1.2 13 1.9 19 .6 23 2.6 31 1.4 36 .4 40 2.2 45 1.7 49 2.4 52H7Z'/%3E%3C/svg%3E") left top / 7px 52px repeat-y,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='52'%3E%3Cpath d='M0 0H4.6L5.9 5 4.3 9 5.5 16 6.4 21 4.4 27 5.1 33 6.6 38 4.8 44 5.6 49 4.6 52H0Z'/%3E%3C/svg%3E") right top / 7px 52px repeat-y,
		linear-gradient(#000 0 0) center / calc(100% - 13px) 100% no-repeat;
}

/* El contenido aparece cuando la hoja ya ha bajado */
.olp .olp-hoja > * {
	opacity: 0;
	transition: opacity .25s ease;
}

.olp.is-abierto .olp-hoja > * {
	opacity: 1;
	transition: opacity .6s ease calc(.45s + var(--olp-espera));
}

/* Greca griega arriba y abajo */
.olp .olp-greca {
	display: block;
	height: 9px;
	margin: 18px 20px 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M0 8.4H12M10.6 8.4V.6H2.6V6.4H7.6V3.4H5.4' fill='none' stroke='%238C6A1F' stroke-width='1.1'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 12px 9px;
	background-position: center;
	opacity: .75;
}

.olp .olp-greca:last-of-type {
	margin: 14px 20px 18px;
	transform: scaleY(-1);
}

.olp .olp-titulo {
	display: block;
	margin: 0 !important;
	padding: 0 6px !important;
	font-family: 'Cinzel', Georgia, serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase;
	color: var(--olp-tinta) !important;
	overflow-wrap: anywhere;
}

/* ─◆─ bajo el título, como en el resto de la web */
.olp .olp-filete {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 10px auto;
}

.olp .olp-filete::before,
.olp .olp-filete::after {
	content: '';
	width: 34px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--olp-tinta-suave));
}

.olp .olp-filete::after {
	background: linear-gradient(90deg, var(--olp-tinta-suave), transparent);
}

.olp .olp-filete i {
	width: 5px;
	height: 5px;
	background: var(--olp-tinta-suave);
	transform: rotate(45deg);
}

.olp .olp-texto {
	display: block;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--olp-tinta);
	overflow-wrap: anywhere;
}

.olp .olp-texto .olp-parrafo {
	display: block;
	margin: 0 0 .55em !important;
	padding: 0 !important;
	font: inherit !important;
	color: inherit !important;
}

.olp .olp-texto .olp-parrafo:last-child {
	margin-bottom: 0 !important;
}

.olp .olp-texto strong { font-weight: 700; }

/* Botón para enrollarlo */
.olp .olp-cerrar {
	position: absolute;
	top: 7px;
	right: 0;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	font: 400 22px/1 Georgia, serif;
	color: var(--olp-tinta-suave);
	cursor: pointer;
	transition: color .3s ease, background-color .3s ease;
}

.olp .olp-cerrar:hover,
.olp .olp-cerrar:focus-visible {
	color: var(--olp-tinta);
	background: rgba(107, 78, 42, .12);
	outline: none;
}

/* Vara de abajo: baja con la hoja */
/* ---------- PANTALLAS MEDIANAS (portátil pequeño y tableta) ----------
   Junto a «OLIMPO» solo caben unos 160 px: cerrado es estrecho y al
   abrirse se ensancha hacia la derecha y después se desenrolla. */
@media (min-width: 768px) and (max-width: 1199px) {
	.olp {
		--olp-ancho: 100px;
		--olp-ancho-abierto: 260px;
		--olp-espera: .35s;
		--olp-rollo: 22px;              /* los dos juntos caben en los 44 px del módulo */
		--olp-rollo-abierto: 19px;
	}
}

/* ---------- MÓVIL ----------
   Cerrado es pequeño; al abrirse sale centrado en la pantalla (ventana
   emergente), se ensancha y después se desenrolla. */
@media (max-width: 767px) {
	.olp {
		--olp-ancho: 88px;
		--olp-ancho-abierto: min(300px, calc(100vw - 64px));
		--olp-espera: .35s;
	}
	/* Rollos algo más finos para el papiro estrecho */
	.olp {
		--olp-rollo: 22px;
		--olp-rollo-abierto: 19px;
	}
	.olp .olp-hoja { padding: 0 14px; }
	.olp .olp-texto { font-size: 17px; }
	.olp .olp-titulo { font-size: 13px !important; }
	.olp .olp-sello { width: 28px; height: 28px; margin: -12px 0 0 -14px; }
	.olp .olp-sello span { font-size: 13px; }
}

/* ---------- VENTANA EMERGENTE (todas las pantallas) ----------
   pergamino.js pone el papiro en esta capa fija, centrada en la pantalla
   y por encima de todo. En su sitio deja la campana para volver a abrirlo. */
.olp-capa {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(8, 7, 8, .6);
	opacity: 0;
	transition: opacity .35s ease;
	-webkit-tap-highlight-color: transparent;
}
.olp-capa.is-activa {
	display: flex;
}
.olp-capa.is-visible {
	opacity: 1;
}
.olp-capa .olp {
	flex: 0 0 auto;
	--olp-ancho-abierto: min(420px, calc(100vw - 64px));
	--olp-espera: .35s;
}
@media (max-width: 767px) {
	.olp-capa .olp {
		--olp-ancho-abierto: min(300px, calc(100vw - 64px));
	}
}

/* La campana: dorada; con aviso lleva una exclamación en un círculo rojo */
.olp-campana {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin: 0 auto;
	padding: 0;
	border: 1px solid rgba(253, 198, 0, .6);
	border-radius: 50%;
	background: rgba(8, 7, 8, .6);
	color: #FDC600;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
	-webkit-tap-highlight-color: transparent;
	animation: olp-campana 3.6s ease-in-out infinite;
	transform-origin: 50% 6px;
}
.olp-campana svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: currentColor;
}
/* Hay aviso: exclamación blanca en un círculo rojo */
.olp-campana .olp-punto {
	position: absolute;
	top: -4px;
	right: -4px;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #E0241B;
	box-shadow: 0 0 0 2px #080708;
	color: #fff;
	font: 700 12px/1 Arial, Helvetica, sans-serif;
}
.olp-campana .olp-punto::before {
	content: "!";
}
.olp-campana:hover,
.olp-campana:focus-visible {
	border-color: #FDC600;
	outline: none;
}
.olp-campana:focus-visible {
	box-shadow: 0 0 0 3px rgba(253, 198, 0, .45), 0 6px 16px rgba(0, 0, 0, .45);
}
/* Sin aviso: solo la campana, quieta y sin punto rojo */
.olp-campana--vacia {
	cursor: default;
	animation: none;
	opacity: .85;
}
.olp.olp-sin-sitio {
	display: none !important;
}
@keyframes olp-campana {
	0%, 14%, 100% { transform: rotate(0); }
	3%  { transform: rotate(14deg); }
	6%  { transform: rotate(-11deg); }
	9%  { transform: rotate(7deg); }
	12% { transform: rotate(-3deg); }
}

/* ---------- SIN ANIMACIONES si el usuario lo ha pedido ---------- */
@media (prefers-reduced-motion: reduce) {
	.olp,
	.olp.is-abierto,
	.olp .olp-hoja-marco,
	.olp .olp-vara,
	.olp .olp-hoja > *,
	.olp.is-abierto .olp-hoja > * {
		transition: none;
	}
	.olp[data-estado="aviso"]:not(.is-abierto) {
		animation: none;
	}
	.olp-capa,
	.olp-campana {
		transition: none;
		animation: none;
	}
}