/*
Theme Name:   MxTramita Child
Theme URI:    https://mxtramita.com
Description:  Tema hijo de Customify para MxTramita.com — trámites de México (IMSS, CURP, SAT, ISSSTE, SEP, Fonacot). Optimizado para SEO, lectura en móvil y velocidad.
Author:       MxTramita
Author URI:   https://mxtramita.com
Template:     customify
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  mxtramita-child
Tags:         blog, custom-menu, custom-logo, featured-images
*/

/* =========================================================
   1. Variables de marca
   ========================================================= */
:root {
	--mx-primary: #0F5132;      /* verde institucional */
	--mx-primary-dark: #0b3d25;
	--mx-accent: #C2410C;       /* terracota para CTAs */
	--mx-accent-dark: #9a3412;
	--mx-ink: #1F2937;
	--mx-muted: #6B7280;
	--mx-cream: #FAF7F2;
	--mx-bg-soft: #f2f7f4;
	--mx-border: #e5e1da;
	--mx-radius: 12px;
}

/* =========================================================
   2. Tipografía y lectura (contenido de trámites = mucho texto)
   ========================================================= */
.entry-content {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--mx-ink);
}

.entry-content h2,
.entry-content h3 {
	scroll-margin-top: 90px; /* para anclas de la tabla de contenidos */
	line-height: 1.3;
}

.entry-content h2 {
	border-left: 4px solid var(--mx-primary);
	padding-left: .6rem;
	margin-top: 2.2rem;
}

.entry-content a {
	color: var(--mx-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-content a:hover {
	color: var(--mx-primary-dark);
}

/* =========================================================
   3. Tablas legibles (requisitos, costos, horarios)
   ========================================================= */
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: .98rem;
	overflow-x: auto;
	display: block;
}

.entry-content table th {
	background: var(--mx-primary);
	color: #fff;
	text-align: left;
}

.entry-content table th,
.entry-content table td {
	border: 1px solid var(--mx-border);
	padding: .6rem .8rem;
}

.entry-content table tr:nth-child(even) td {
	background: var(--mx-bg-soft);
}

/* =========================================================
   4. Caja CTA de la app "Guías CURP Info" (shortcode [app_curp_cta])
   ========================================================= */
.mx-app-cta {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	background: var(--mx-bg-soft);
	border: 1px solid var(--mx-border);
	border-left: 5px solid var(--mx-primary);
	border-radius: var(--mx-radius);
	padding: 1.1rem 1.3rem;
	margin: 2rem 0;
}

.mx-app-cta__text {
	flex: 1 1 260px;
}

.mx-app-cta__text strong {
	display: block;
	font-size: 1.1rem;
	color: var(--mx-primary-dark);
	margin-bottom: .2rem;
}

.mx-app-cta__text span {
	color: var(--mx-muted);
	font-size: .95rem;
}

.mx-app-cta__btn {
	display: inline-block;
	background: var(--mx-primary);
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 600;
	padding: .7rem 1.2rem;
	border-radius: 999px;
	white-space: nowrap;
	transition: background .2s ease;
}

.mx-app-cta__btn:hover {
	background: var(--mx-primary-dark);
}

/* =========================================================
   5. Caja "avisos / importante"
   ========================================================= */
.mx-note {
	background: #fff8e6;
	border: 1px solid #f0d98a;
	border-left: 5px solid #e0a800;
	border-radius: var(--mx-radius);
	padding: 1rem 1.2rem;
	margin: 1.6rem 0;
}

/* =========================================================
   6. Ajustes de velocidad/legibilidad en móvil
   ========================================================= */
@media (max-width: 600px) {
	.entry-content {
		font-size: 1rem;
	}
	.mx-app-cta {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* =========================================================
   7. Home / Front page
   ========================================================= */
.mx-home {
	background: var(--mx-cream);
}

/* Hero a todo el ancho aunque Customify use contenedor centrado */
.mx-hero {
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, var(--mx-primary), #14532d);
	color: #fff;
	padding: 72px 24px 88px;
	text-align: center;
}

.mx-hero__inner {
	max-width: 720px;
	margin: 0 auto;
}

.mx-hero h1 {
	font-size: clamp(2rem, 5vw, 3.2rem);
	font-weight: 800;
	line-height: 1.15;
	color: #fff;
	margin: 0 0 16px;
}

.mx-hero p {
	font-size: 1.15rem;
	opacity: .92;
	margin: 0 auto 32px;
	max-width: 640px;
}

/* Buscador */
.mx-search {
	display: flex;
	max-width: 560px;
	margin: 0 auto;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
}

.mx-search input {
	flex: 1;
	border: none;
	padding: 16px 18px;
	font-size: 1rem;
	color: var(--mx-ink);
	outline: none;
}

.mx-search button {
	background: var(--mx-accent);
	color: #fff;
	border: none;
	padding: 0 26px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s;
}

.mx-search button:hover {
	background: var(--mx-accent-dark);
}

/* Secciones */
.mx-section {
	max-width: 1100px;
	margin: 0 auto;
	padding: 56px 24px;
}

.mx-section--tight {
	padding-top: 0;
	padding-bottom: 0;
}

.mx-section > h2 {
	font-size: 1.8rem;
	margin: 0 0 6px;
}

.mx-sub {
	color: var(--mx-muted);
	margin: 0 0 28px;
}

/* Grids de tarjetas */
.mx-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}

.mx-card {
	display: block;
	background: #fff;
	border-radius: 14px;
	padding: 22px;
	border: 1px solid var(--mx-border);
	color: var(--mx-ink);
	text-decoration: none;
	transition: transform .2s, box-shadow .2s;
}

.mx-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
	color: var(--mx-ink);
}

.mx-card__icon {
	font-size: 1.8rem;
	margin-bottom: 12px;
	line-height: 1;
}

.mx-card h3 {
	font-size: 1.05rem;
	margin: 0 0 6px;
	color: var(--mx-primary-dark);
}

.mx-card p {
	font-size: .85rem;
	color: var(--mx-muted);
	margin: 0;
}

/* Lista de guías (una columna más compacta) */
.mx-grid--list {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.mx-grid--list .mx-card {
	padding: 18px 20px;
}

/* Disclaimer YMYL */
.mx-disclaimer {
	background: #FFF7ED;
	border-left: 4px solid var(--mx-accent);
	padding: 18px 22px;
	border-radius: 8px;
	max-width: 1100px;
	margin: 0 auto 56px;
	font-size: .95rem;
	color: var(--mx-ink);
}

.mx-disclaimer a {
	color: var(--mx-accent-dark);
}

@media (max-width: 600px) {
	.mx-hero {
		padding: 56px 20px 64px;
	}
	.mx-search {
		flex-direction: column;
	}
	.mx-search button {
		padding: 14px;
	}
}

/* =========================================================
   8. Pillar (CURP y otros silos)
   ========================================================= */
.mx-pillar-intro {
	max-width: 760px;
	margin: 0 auto;
	font-size: 1.08rem;
	line-height: 1.75;
	color: var(--mx-ink);
}

.mx-pillar-intro p {
	margin: 0 0 1.1rem;
}

/* Chips de estados */
.mx-estados {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mx-chip {
	display: inline-block;
	background: #fff;
	border: 1px solid var(--mx-border);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: .9rem;
	color: var(--mx-primary-dark);
	text-decoration: none;
	transition: background .2s, border-color .2s;
}

.mx-chip:hover {
	background: var(--mx-bg-soft);
	border-color: var(--mx-primary);
	color: var(--mx-primary-dark);
}

/* FAQ acordeón (nativo con <details>) */
.mx-faq {
	max-width: 820px;
	margin: 0 auto;
}

.mx-faq details {
	background: #fff;
	border: 1px solid var(--mx-border);
	border-radius: var(--mx-radius);
	margin-bottom: 14px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 81, 50, .04);
	transition: box-shadow .2s, border-color .2s;
}

.mx-faq details[open] {
	border-color: var(--mx-primary);
	box-shadow: 0 6px 20px rgba(15, 81, 50, .10);
}

.mx-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 22px;
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--mx-primary-dark);
	transition: background .2s, color .2s;
}

.mx-faq summary:hover {
	background: var(--mx-bg-soft);
}

.mx-faq details[open] summary {
	color: var(--mx-primary);
	border-bottom: 1px solid var(--mx-border);
}

.mx-faq summary::-webkit-details-marker {
	display: none;
}

/* Indicador circular +/- */
.mx-faq summary::after {
	content: '+';
	flex: 0 0 auto;
	margin-left: auto;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--mx-bg-soft);
	color: var(--mx-accent);
	font-size: 1.35rem;
	line-height: 1;
	font-weight: 400;
	transition: transform .25s ease, background .2s, color .2s;
}

.mx-faq details[open] summary::after {
	content: '−';
	background: var(--mx-accent);
	color: #fff;
	transform: rotate(180deg);
}

.mx-faq details > p {
	margin: 0;
	padding: 16px 22px 20px;
	color: var(--mx-ink);
	line-height: 1.7;
	animation: mx-faq-in .25s ease;
}

@keyframes mx-faq-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}