/* =========================================================
   Cholul.com.mx · ajustes para WordPress
   El diseño vive en cholul.css (copiado del prototipo). Aquí solo se
   adapta el marcado de WordPress y de los bloques nativos a ese diseño.
   ========================================================= */

/* La cabecera es sticky: el envoltorio del template-part no debe encerrarla. */
.parte-cabecera, .parte-pie { display: contents; }
main.wp-block-group { display: block; }
.wp-site-blocks > * { margin-block: 0; }
:where(.wp-block-group) { margin: 0; }

/* Bloques del tema que no son la primera cosa en su contenedor */
.encabezado .categorias { margin-top: var(--e2); }

/* ---------- Botones nativos con el estilo .btn ---------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--e3); }
.wp-block-button__link {
	display: inline-flex; align-items: center; gap: .5em; font: 600 var(--t-s)/1 var(--f-texto);
	padding: .85em 1.15em; border-radius: var(--radio); text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
	background: var(--selva); color: var(--hueso);
}
.is-style-ocre > .wp-block-button__link { background: var(--ocre); color: #1F1F1F; }
.is-style-ocre > .wp-block-button__link:hover { background: color-mix(in srgb, var(--ocre) 85%, #fff); }
.is-style-borde > .wp-block-button__link { background: transparent; border-color: currentColor; color: inherit; }
.portada-botones .is-style-borde > .wp-block-button__link { color: var(--sobre-oscuro); }

/* ---------- Portada (contenido de la página Inicio) ---------- */
.inicio > * + * { margin-top: 0; }
.portada-imagen.wp-block-image { margin: 0; }
.portada-imagen figcaption.wp-element-caption { margin: 0; }
.garantias li::before { content: "✓"; color: var(--ocre); font-weight: 700; }
.titulo-lista { font-size: var(--t-xl) !important; margin: var(--e7) 0 var(--e4); }
.is-style-albarrada.wp-block-separator { border: 0; height: 18px; background: url("../img/albarrada.svg") repeat-x left center / auto 18px; opacity: .9; margin: 0; }

/* ---------- Prosa: bloques nativos dentro del texto ---------- */
.prosa { margin-inline: 0; }
.prosa > :first-child { margin-top: 0; }
.prosa .wp-block-image, .prosa figure { margin-inline: 0; }
.prosa .wp-block-image img { border-radius: var(--radio); }
.prosa figcaption, .wp-element-caption { font-size: var(--t-xs); color: var(--tinta-suave); margin-top: .5rem; line-height: 1.45; }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa li + li { margin-top: .35em; }
.prosa .wp-block-quote p { margin: 0; }
.prosa .wp-block-table { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); margin-inline: 0; }
.prosa .wp-block-table table { border-collapse: collapse; width: 100%; font-size: var(--t-s); }
.prosa .wp-block-table th, .prosa .wp-block-table td { text-align: left; padding: .65rem .85rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.prosa .wp-block-table thead th { background: var(--arena); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.prosa .wp-block-table tbody tr:last-child td { border-bottom: 0; }
.prosa .wp-block-footnotes { margin: 0; padding-left: 1.4rem; display: grid; gap: .6rem; }
.fuentes .wp-block-footnotes li::marker { color: var(--ocre-texto); font-weight: 700; }
.fuentes .wp-block-footnotes a[aria-label] { text-decoration: none; margin-left: .3em; }
.prosa > .fuentes { margin-top: var(--e6); }
.correcciones ul { margin: .3rem 0; padding-left: 1.2rem; }

/* ---------- Estilos de bloque (register_block_style) ---------- */
p.is-style-entradilla { font-size: var(--t-l); color: var(--tinta-suave); line-height: 1.5; }
p.is-style-ceja { font: 600 var(--t-xs)/1.3 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--ocre-texto); }
p.is-style-aviso { display: block; padding: var(--e4); border-radius: var(--radio); background: var(--arena); font-size: var(--t-s); color: var(--tinta-suave); border-left: 3px solid var(--ocre); }
.prosa blockquote.is-style-destacada { border: 0; padding: var(--e4) 0; text-align: center; font-size: var(--t-2xl); color: var(--selva); border-block: 1px solid var(--linea); }
:root.noche .prosa blockquote.is-style-destacada { color: var(--ocre); }
.is-style-caja { border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e5); display: grid; gap: var(--e3); background: var(--hueso); }
.is-style-caja-ocre { border: 1px solid color-mix(in srgb, var(--ocre) 35%, transparent); border-radius: var(--radio); padding: var(--e5); display: grid; gap: var(--e3); background: color-mix(in srgb, var(--ocre) 12%, var(--hueso)); }
.is-style-caja > *, .is-style-caja-ocre > * { margin: 0 !important; }
.is-style-datos { border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e4) var(--e5); background: var(--hueso); font-size: var(--t-s); }
.is-style-datos h2 { font-size: var(--t-l) !important; margin: 0 0 .5rem !important; }
.is-style-datos .wp-block-table { border: 0; margin: 0; }
.is-style-ficha td:first-child { font-weight: 600; white-space: nowrap; }
.is-style-datos .is-style-ficha td { border: 0; padding: .2rem 1rem .2rem 0; }
ol.is-style-pasos, ul.is-style-pasos { list-style: none; padding: 0; counter-reset: paso; display: grid; gap: var(--e4); }
.is-style-pasos > li { display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--e3); counter-increment: paso; margin: 0 !important; }
.is-style-pasos > li::before { content: counter(paso); width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--arena); border: 1px solid var(--linea); font: 600 var(--t-l)/1 var(--f-display); color: var(--selva); }
.wp-block-image.is-style-panoramica img { aspect-ratio: 21 / 9; object-fit: cover; width: 100%; }

/* ---------- Lienzo: página libre para bloques nativos o de plugins ---------- */
.lienzo > * { margin-block: 0; }
.lienzo > :where(:not(.alignfull):not(.wp-block-cover):not(.wp-block-group.alignfull)) { max-width: calc(var(--ancho) + 48px); margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.lienzo > * + * { margin-top: var(--e5); }
.lienzo > :last-child { margin-bottom: var(--e7); }
.hub, .micrositio { padding-block: var(--e6); }
.hub > *:not(.alignfull):not(section):not(.bloque),
.micrositio > *:not(.alignfull):not(section):not(.bloque) {
	max-width: calc(var(--ancho) + 48px); margin-inline: auto;
	padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
	.hub > *:not(.alignfull):not(section):not(.bloque),
	.micrositio > *:not(.alignfull):not(section):not(.bloque) { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
}
.hub > :is(p, ul, ol, h2, h3, .wp-block-table), .micrositio > :is(p, ul, ol, h2, h3) { max-width: calc(var(--lectura) + 48px); margin-left: max(0px, calc((100% - var(--ancho) - 48px) / 2)); }
.hub > * + *, .micrositio > * + * { margin-top: var(--e4); }
.hub > h2, .micrositio > h2 { margin-top: var(--e6); font-size: var(--t-2xl); }
.hub > section.bloque:first-child, .micrositio > section.bloque:first-child { margin-top: calc(-1 * var(--e6)); }
.micro-hero { padding-block: var(--e5) var(--e4); }
.micro-hero > .wp-block-group { display: grid; gap: var(--e4); align-content: center; }
.micro-hero p:not(.ceja) { font-size: var(--t-l); color: var(--tinta-suave); }
.encabezado--verde .ceja { color: var(--ocre); }

/* ---------- Formularios (nativos y Fluent Forms) ---------- */
.prosa input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.prosa select, .prosa textarea,
.lienzo input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.lienzo select, .lienzo textarea,
.frm-fluent-form .ff-el-form-control {
	font: inherit; font-size: var(--t-m); width: 100%; padding: .65rem .75rem; border: 1px solid var(--linea); border-radius: var(--radio);
	background: var(--hueso); color: var(--tinta); box-shadow: none;
}
.frm-fluent-form .ff-el-form-control:focus, .prosa input:focus, .prosa textarea:focus, .prosa select:focus {
	outline: 0; border-color: var(--selva); box-shadow: 0 0 0 3px color-mix(in srgb, var(--selva) 20%, transparent);
}
.frm-fluent-form { display: grid; gap: var(--e3); font-size: var(--t-s); }
.frm-fluent-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.frm-fluent-form .ff-el-group { margin-bottom: var(--e4); }
.frm-fluent-form .ff-el-input--label label { font-weight: 600; font-size: var(--t-s); color: var(--tinta); display: inline-block; margin-bottom: .35rem; }
.frm-fluent-form .ff-el-is-required.asterisk-right label::after { content: " *"; color: var(--ocre-texto); }
.frm-fluent-form .ff-el-help-message, .frm-fluent-form .ff-el-form-check-label { color: var(--tinta-suave); font-size: var(--t-xs); }
.frm-fluent-form .ff-btn-submit, .frm-fluent-form .ff-btn,
.prosa button[type=submit], .lienzo button[type=submit] {
	display: inline-flex; align-items: center; gap: .5em; font: 600 var(--t-s)/1 var(--f-texto); padding: .85em 1.15em;
	border-radius: var(--radio); border: 1.5px solid transparent; cursor: pointer; background: var(--selva); color: var(--hueso);
}
.frm-fluent-form .ff-btn-submit:hover { filter: brightness(1.08); }
.frm-fluent-form .error, .frm-fluent-form .text-danger { color: #B3261E; font-size: var(--t-xs); margin-top: .3rem; }
:root.noche .frm-fluent-form .error { color: #F2B8B5; }
.ff-message-success { padding: var(--e4); border-radius: var(--radio); background: color-mix(in srgb, var(--selva) 12%, var(--hueso)); border: 1px solid color-mix(in srgb, var(--selva) 35%, transparent); color: var(--tinta); }
.ff-errors-in-stack { color: #B3261E; }
.ff-el-group .ff-el-form-check { display: flex; gap: .5rem; align-items: flex-start; }

/* ---------- Búsqueda nativa ---------- */
.wp-block-search__inside-wrapper { display: flex; gap: var(--e2); }
.wp-block-search__input { font: inherit; padding: .6rem .8rem; border: 1px solid var(--linea); border-radius: 99px; background: var(--hueso); color: var(--tinta); flex: 1; }
.wp-block-search__button { font: 600 var(--t-s)/1 var(--f-texto); padding: .6rem 1rem; border-radius: 99px; border: 0; background: var(--selva); color: var(--hueso); }

/* ---------- Incrustados reales ya cargados ---------- */
.incrustado.cargado-real { display: block; aspect-ratio: auto; background: none; border: 0; }
.incrustado--video.cargado-real { aspect-ratio: 16 / 9; position: relative; }

/* ---------- Ajustes menores ---------- */
.evento-largo .sello, .ev-breve .sello, .ev-cab .sello { justify-self: start; margin-left: .3rem; }
.sin-resultados a { color: var(--selva); }
.encabezado form { max-width: 520px; }
.paginacion .ico { width: 1em; height: 1em; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.portada-lateral .tarjeta-sobre img { width: 100%; }

/* Portada con una entrada (modo "lo más reciente" o "elegida") */
.portada-principal--entrada h1 a { color: inherit; text-decoration: none; }
.portada-principal--entrada h1 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.portada-principal--entrada .portada-botones { margin-top: var(--e2); }
/* En el editor, el bloque Portada envuelve al grupo: debe ocupar su celda de la rejilla */
.portada-grid > .wp-block-cholul-portada { display: grid; }
.portada-grid > .wp-block-cholul-portada > .cholul-portada-fija { display: grid; }

/* Eventos: botones de mes y filtros */
.meses ul { display: flex; flex-wrap: wrap; gap: var(--e2); list-style: none; margin: 0 0 var(--e4); padding: 0; }
.filtros-eventos { display: flex; flex-wrap: wrap; align-items: end; gap: var(--e3) var(--e4); padding: var(--e4); margin-bottom: var(--e5); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--arena); }
.filtros-eventos label { display: grid; gap: .25rem; font-size: var(--t-s); font-weight: 600; }
.filtros-eventos select { min-width: 11rem; padding: .5rem .6rem; border: 1px solid var(--linea); border-radius: 6px; background: var(--hueso); color: var(--tinta); font: inherit; font-weight: 400; }
.filtros-eventos .casilla { display: flex; align-items: center; gap: .45rem; font-weight: 600; padding-bottom: .55rem; }
.filtros-eventos .casilla input { width: 1.1rem; height: 1.1rem; accent-color: var(--selva); }
.filtros-eventos [data-cuenta] { margin-left: auto; padding-bottom: .55rem; color: var(--tinta-suave); }
.mes { scroll-margin-top: 90px; }
.enlace-boton { background: none; border: 0; padding: 0; color: var(--selva); text-decoration: underline; font: inherit; cursor: pointer; }
@media (max-width: 599px) { .filtros-eventos { padding: var(--e3); gap: var(--e2) var(--e3); } .filtros-eventos label:not(.casilla) { flex: 1 1 40%; min-width: 0; } .filtros-eventos select { min-width: 0; } .filtros-eventos select { width: 100%; } .filtros-eventos [data-cuenta] { margin-left: 0; } }

/* Grupos en redes */
.aviso-redes { display: flex; gap: .6rem; align-items: flex-start; padding: var(--e3) var(--e4); margin-bottom: var(--e4); border-left: 3px solid var(--ocre); background: var(--arena); border-radius: 0 var(--radio) var(--radio) 0; font-size: var(--t-s); color: var(--tinta); }
.aviso-redes .ico { flex: none; margin-top: .15rem; color: var(--ocre-texto); }
.red-grupo .inicial .ico { width: 1.2em; height: 1.2em; }
.inicial.red-facebook { background: #1877F2; color: #fff; }
.inicial.red-whatsapp { background: #1F9D55; color: #fff; }
.red-grupo .negocio-cuerpo .meta { display: flex; gap: .4rem; align-items: center; color: var(--tinta-suave); }

/* Portada sin entradas todavía (sitio recién instalado): la portada ocupa todo el ancho. */
.portada-grid:not(:has(.portada-lateral)) { grid-template-columns: 1fr; }

/* Clases y actividades permanentes (arriba del calendario de eventos). */
.permanentes { padding-top: var(--e4); }
.fecha--dias { width: 76px; }
.fecha--dias span { font-size: .58rem; letter-spacing: .08em; }
.fecha--dias b { font-size: 1rem; line-height: 1.2; padding: .45rem .2rem .25rem; }
.fecha--dias small { font-size: .62rem; padding: 0 .2rem .35rem; }

/* Ficha del lugar: próximos eventos aquí. */
.eventos-lugar__lista { display: grid; gap: var(--e3); }
.eventos-lugar .rel-item { display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: start; }
.eventos-lugar .rel-item a { font-weight: 600; line-height: 1.3; }
.eventos-lugar .rel-item p { margin-top: .2rem; }
.eventos-lugar .fecha { width: 58px; }
.eventos-lugar .fecha--dias { width: 64px; }
.ev-lugar { display: block; margin-top: .25rem; font-size: var(--t-s); }
