/* Desayuno y creadores: historias fotográficas con tipografía de marca. */
.mp-esencia { --mp-foco: #3f1fb3; padding-block: clamp(7rem, 12vw, 12rem) clamp(6rem, 10vw, 10rem); background: #f6f0e5; color: #351d15; font-family: var(--wp--preset--font-family--poppins); }
.mp-esencia :is(.mp-esencia__rejilla, .mp-esencia__texto, .mp-historias, .mp-historias__lista, .mp-historia, .mp-historia__contenido) > * { margin-block: 0; }
.mp-esencia__rejilla { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.42fr); align-items: center; gap: clamp(2rem, 3.5vw, 4rem); }
.mp-esencia__antetitulo { font-size: .875rem; font-weight: 600; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; }
.mp-esencia .mp-esencia__titulo { margin-top: 1.25rem; font-family: var(--wp--preset--font-family--coolvetica); font-size: clamp(3rem, 4.9vw, 5rem); font-weight: 400; line-height: .98; letter-spacing: -.025em; text-transform: none; text-wrap: initial; }
.mp-esencia__titulo span { display: block; color: #3f1fb3; }
.mp-esencia .mp-esencia__subtitulo { margin-top: 1.75rem; font-size: clamp(1.1rem, 1.45vw, 1.4rem); font-weight: 500; line-height: 1.4; }
.mp-esencia .mp-esencia__cuerpo { max-width: 30em; margin-top: 1rem; font-size: 1rem; line-height: 1.8; }
.mp-esencia .mp-esencia__acciones { margin-top: 2rem; }
.mp-esencia__acciones .wp-block-button { width: min(100%, 19rem); }
.mp-esencia .mp-esencia__acciones .wp-block-button__link { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 5px; width: 100%; min-height: 52px; padding: 0; border: 0; border-radius: 99px; background: none; color: #f6f0e5; font: 600 .925rem/1.3 var(--wp--preset--font-family--poppins); text-transform: none; letter-spacing: 0; box-shadow: none; transform: none; }
.mp-esencia__boton-texto, .mp-esencia__boton-icono { display: flex; align-items: center; justify-content: center; border-radius: 99px; background: #3f1fb3; transition: background-color 180ms ease; }
.mp-esencia__boton-texto { min-width: 0; padding: .75rem 1rem; }
.mp-esencia__boton-icono { width: 52px; height: 52px; align-self: center; }
.mp-esencia__boton-icono::before { content: ''; width: 1.2rem; height: 1.2rem; background: currentColor; mask: var(--mp-flecha) center / contain no-repeat; }
.mp-esencia__acciones a:is(:hover, :focus-visible) :is(.mp-esencia__boton-texto, .mp-esencia__boton-icono) { background: #2d1586; }

/* Dos historias reales como referencia; cada foto sigue siendo editable en WordPress.
 * Sin panel ni cabecera: las dos tarjetas, grandes y rectas, son las protagonistas. */
.mp-historias { position: relative; isolation: isolate; min-width: 0; color: #351d15; }
.mp-historias__lista { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(.875rem, 1.4vw, 1.25rem); }
/* Manchas de color detrás de las tarjetas: dan energía sin volver al panel. */
.mp-historias__lista::before, .mp-historias__lista::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.mp-historias__lista::before { top: -2rem; right: -2rem; width: 46%; aspect-ratio: 1; background: #d0d480; }
.mp-historias__lista::after { bottom: -2rem; left: -2.5rem; width: 34%; aspect-ratio: 1; background: #ffa4cd; }
.mp-historia { position: relative; isolation: isolate; min-width: 0; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 1.75rem; background: #351d15; color: #fff; }
.mp-historia__foto img { transition: transform 600ms ease; }
.mp-historia:is(:hover, :focus-within) .mp-historia__foto img { transform: scale(1.04); }
.mp-historia::before { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgb(18 10 30 / .6), transparent 28%, transparent 42%, rgb(18 10 30 / .87)); pointer-events: none; }
.mp-historia::after { content: ''; position: absolute; z-index: 2; top: .7rem; left: .75rem; right: .75rem; height: 2px; border-radius: 99px; background: linear-gradient(to right, #fff 0 49%, transparent 49% 51%, rgb(255 255 255 / .35) 51%); pointer-events: none; }
.mp-historia--el::after { background: linear-gradient(to right, #fff 0 49%, transparent 49% 51%, #fff 51%); }
.mp-historia :is(p, figure, .mp-historia__contenido) { margin-block: 0; }
.mp-historia .mp-historia__foto { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; }
.mp-historia__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% center; }
.mp-historia--el .mp-historia__foto img { object-position: 60% center; }
.mp-historia .mp-historia__perfil { position: absolute; z-index: 2; top: 1.5rem; left: .9rem; right: .9rem; display: flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 600; line-height: 1.3; color: #fff; }
.mp-historia__perfil::before { content: ''; width: 2.4rem; height: 2.4rem; flex-shrink: 0; border: 2px solid #d0d480; border-radius: 50%; background: #3f1fb3; box-shadow: inset 0 0 0 2px #3f1fb3; }
.mp-historia--ella .mp-historia__perfil::before { background-image: var(--mp-avatar-image, url('../../img/esencia/historias/desayuno-cereal-ella-480.webp')); background-size: 330%; background-position: 50% 27%; }
.mp-historia--el .mp-historia__perfil::before { background-image: var(--mp-avatar-image, url('../../img/esencia/historias/desayuno-cereal-el-480.webp')); background-size: 400%; background-position: 61% 43%; }
.mp-historia .mp-historia__contenido { position: absolute; z-index: 2; left: 1.1rem; right: 1.1rem; bottom: 1.4rem; }
.mp-historias[data-enhanced] .mp-historia__contenido { bottom: 4.1rem; }
.mp-historia__etiqueta { display: inline-block; margin: 0 0 .75rem !important; padding: .4rem .75rem; border-radius: 99px; background: #d0d480; color: #29175d; font: 600 .8rem/1.3 var(--wp--preset--font-family--poppins); }
.mp-historia--el .mp-historia__etiqueta { background: #ffa4cd; }
.mp-historia .mp-historia__frase { font-family: var(--wp--preset--font-family--coolvetica); font-size: clamp(1.75rem, 2.7vw, 2.9rem); font-weight: 400; line-height: 1; letter-spacing: -.015em; }
.mp-historia__abrir { position: absolute; z-index: 3; inset: 0; width: 100%; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; text-align: left; }
.mp-historia__abrir span { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1.1rem; display: flex; align-items: center; justify-content: space-between; padding: .6rem .6rem .6rem 1rem; border-radius: 99px; background: rgb(255 255 255 / .18); backdrop-filter: blur(6px); font: 600 .85rem/1.2 var(--wp--preset--font-family--poppins); transition: background-color 200ms ease, color 200ms ease; }
.mp-historia__abrir span::after { content: ''; width: 1.1rem; height: 1.1rem; background: currentColor; mask: var(--mp-flecha) center / contain no-repeat; }
.mp-historia__abrir:is(:hover, :focus-visible) span { background: #d0d480; color: #29175d; }
.mp-historia:has(.mp-historia__abrir:focus-visible) { outline: 3px solid #3f1fb3; outline-offset: 5px; }
.mp-historia__abrir:focus-visible { outline: none; }


/* Visor de fotos: abierto solo por interacción, con controles de teclado nativos. */
.mp-historias-visor { max-width: none; max-height: none; width: min(440px, calc(100vw - 2rem)); padding: 3rem 0 0; border: 0; background: transparent; color: #fff; overflow: visible; }
.mp-historias-visor::backdrop { background: rgb(18 10 30 / .86); backdrop-filter: blur(7px); }
.mp-historias-visor__lienzo { margin-inline: auto; width: min(100%, calc((100svh - 9rem) * 9 / 16)); }
.mp-historias-visor .mp-historia { width: 100%; margin: 0; aspect-ratio: 9 / 16; box-shadow: none; }
.mp-historias-visor .mp-historia__frase { font-size: clamp(1.6rem, 4vw, 2.5rem); }
.mp-historias-visor .mp-historia__contenido { bottom: 2rem; }
.mp-historias-visor__cerrar { position: absolute; right: 0; top: 0; width: 2.5rem; height: 2.5rem; border: 1px solid rgb(255 255 255 / .5); border-radius: 50%; background: transparent; color: #fff; font: 1.6rem/1 sans-serif; cursor: pointer; }
.mp-historias-visor__pie { display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding-top: 1rem; font: 500 .75rem/1.4 var(--wp--preset--font-family--poppins); }
.mp-historias-visor__pie button { width: 2.5rem; height: 2.5rem; padding: .65rem; border: 1px solid rgb(255 255 255 / .5); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.mp-historias-visor__pie button::after { content: ''; display: block; width: 100%; height: 100%; background: currentColor; mask: var(--mp-flecha) center / contain no-repeat; }
.mp-historias-visor__anterior::after { transform: rotate(180deg); }
.mp-historias-visor button:focus-visible { outline: 3px solid #d0d480; outline-offset: 3px; }
html:has(.mp-historias-visor[open]) { overflow: hidden; }

@media (width < 64em) {
	.mp-esencia__rejilla { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
	.mp-esencia__texto { max-width: 44rem; }
	.mp-esencia .mp-esencia__titulo { font-size: clamp(3rem, 7.5vw, 5rem); }
	.mp-historias { width: 100%; max-width: 44rem; justify-self: center; }
	.mp-historia .mp-historia__frase { font-size: clamp(1.75rem, 4.6vw, 2.6rem); }
}
@media (width < 40em) {
	.mp-esencia { padding-block: 5rem; }
	.mp-esencia .mp-esencia__titulo { font-size: clamp(2.65rem, 11.2vw, 4.6rem); }
	.mp-esencia .mp-esencia__subtitulo { margin-top: 1.5rem; font-size: 1.125rem; }
	.mp-esencia .mp-esencia__cuerpo { font-size: .9375rem; line-height: 1.75; }
	.mp-esencia__acciones .wp-block-button { width: 100%; }
	/* Una historia completa y parte de la siguiente invitan al gesto lateral. */
	.mp-historias__lista { display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #3f1fb3 transparent; padding-bottom: .75rem; }
	.mp-historias__lista::before, .mp-historias__lista::after { display: none; }
	.mp-historias__lista > .mp-historia { flex: 0 0 82%; scroll-snap-align: start; }
	.mp-historia .mp-historia__frase { font-size: clamp(1.9rem, 8vw, 2.6rem); }
}
@media (prefers-reduced-motion: reduce) {
	.mp-esencia__boton-texto, .mp-esencia__boton-icono, .mp-historia__foto img, .mp-historia__abrir span { transition: none; }
}