/*
Theme Name: Carro Electrico Colombia
Template: astra
Description: Tema hijo de Astra con la direccion de diseno Madera y Voltaje: editorial oscuro en negro calido y chocolate con un unico acento dorado, disenado para cumplir WCAG 2.2 nivel AA.
Author: carroelectrico.com.co
Version: 1.0.0
Text Domain: cec
*/

/* ==========================================================================
   1. Tokens de la direccion Madera y Voltaje
   Fuente unica de verdad. Se aplican a Astra, a Gutenberg y a Elementor.
   ========================================================================== */

:root {
  --cec-bg:       #14100D;
  --cec-surface:  #1F1813;
  --cec-raised:   #2B2119;
  --cec-ink:      #F5EEE4;
  --cec-muted:    #CBB9A2;
  --cec-accent:   #E0B24C;
  --cec-on-accent:#17110A;
  --cec-bronze:   #8A6A3A;
  --cec-line:     #3A2D22;

  --cec-font-head: "Newsreader", Georgia, "Times New Roman", serif;
  --cec-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --cec-xs: 8px;
  --cec-sm: 16px;
  --cec-md: 32px;
  --cec-lg: 64px;
  --cec-xl: 112px;

  --cec-r-sm: 4px;
  --cec-r-md: 14px;
  --cec-r-pill: 999px;

  --cec-measure: 66ch;
  --cec-shell: 1200px;

  /* Luz ambiental calida: la profundidad viene de la luz, no de sombras negras. */
  --cec-glow: radial-gradient(60% 60% at 50% 45%, rgba(224,178,76,.16) 0%, rgba(224,178,76,.05) 45%, transparent 72%);
  --cec-ease: cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   2. Base tipografica
   Display ajustado (1.02-1.15). Cuerpo comodo (1.7) y medido (66ch).
   Cuerpo minimo 17px, peso minimo 400: sin tipografia fina de lujo.
   ========================================================================== */

body,
.ast-container {
  background-color: var(--cec-bg);
  color: var(--cec-ink);
  font-family: var(--cec-font-body);
  font-size: 1.0625rem;   /* 17px */
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title {
  font-family: var(--cec-font-head);
  font-weight: 600;
  color: var(--cec-ink);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1, .entry-title { font-size: clamp(2.5rem, 5.2vw, 4.25rem); line-height: 1.04; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.85rem); line-height: 1.1; }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.16; }
h4 { font-size: 1.25rem; line-height: 1.25; }

/* Las cursivas de display con descendentes (y g j p q) se cortan con
   interlineados cerca de 1.0. La reserva va en el titular y no en el propio
   em: con display inline-block el enfasis se comporta como una palabra
   indivisible y forzaba una linea de mas en movil. */
h1, h2, h3 { padding-bottom: .08em; }

h1 em, h2 em, h3 em,
h1 i, h2 i, h3 i {
  font-style: italic;
  font-weight: 600;
  color: var(--cec-accent);
}

p, li { max-width: var(--cec-measure); }
.cec-full p, .cec-full li, td p, th p { max-width: none; }

/* Etiqueta en mayusculas: racionada a una por cada tres secciones. */
.cec-label {
  font-family: var(--cec-font-body);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cec-muted);
  max-width: none;
}

.cec-lead {
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  line-height: 1.6;
  color: var(--cec-muted);
  max-width: 34em;
}

/* ==========================================================================
   3. Enlaces: nunca solo color. Siempre subrayado en texto corrido.
   ========================================================================== */

a { color: var(--cec-accent); }

.entry-content a:not(.cec-btn):not(.wp-block-button__link),
.cec-prose a:not(.cec-btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--cec-bronze);
  transition: text-decoration-color .2s var(--cec-ease);
}

.entry-content a:not(.cec-btn):hover,
.cec-prose a:not(.cec-btn):hover {
  text-decoration-color: var(--cec-accent);
}

/* ==========================================================================
   4. Accesibilidad: foco visible, salto de contenido, area tactil
   WCAG 2.2 AA: 2.4.7 Focus Visible, 2.4.11 Focus Not Obscured,
   2.5.8 Target Size (minimo 24px, aqui elevado a 44px).
   ========================================================================== */

/* Sin :where(). Ese selector vale especificidad cero y Astra ganaba con su
   propio contorno punteado de 0.57px, que no cumple 2.4.11 Focus Appearance.
   El dorado da 9.59:1 contra el fondo, muy por encima del 3:1 exigido. */
html a:focus-visible,
html button:focus-visible,
html input:focus-visible,
html select:focus-visible,
html textarea:focus-visible,
html summary:focus-visible,
html details:focus-visible,
html [tabindex]:focus-visible,
html .elementor-button:focus-visible {
  outline: 3px solid var(--cec-accent) !important;
  outline-offset: 3px !important;
  border-radius: var(--cec-r-sm);
}

/* El enlace de salto tiene fondo dorado, asi que su propio contorno debe ser
   crema para no desaparecer sobre el. */
html .skip-link:focus-visible,
html .skip-link:focus {
  outline: 3px solid var(--cec-ink) !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   16. Paginas de contenido
   Medida de lectura controlada y jerarquia visible sin depender del color.
   ========================================================================== */

.entry-content > * { margin-block: 0 1.15em; }

.entry-content h2 {
  margin-block: 2.2em .5em;
  padding-top: .8em;
  border-top: 1px solid var(--cec-line);
  max-width: 30ch;
}

.entry-content h3 { margin-block: 1.8em .4em; color: var(--cec-ink); }

.entry-content > p,
.entry-content > ul,
.entry-content > ol { max-width: 66ch; }

.entry-content ul, .entry-content ol { padding-left: 1.25em; }
.entry-content li { margin-bottom: .55em; }
.entry-content li::marker { color: var(--cec-bronze); }
.entry-content b, .entry-content strong { color: var(--cec-ink); font-weight: 700; }

.entry-content .cec-lead {
  max-width: 38ch;
  margin-bottom: 1.8em;
}

.entry-content .cec-tablewrap { margin-block: 1.6em 2em; max-width: 100%; }

/* La cabecera del articulo hereda la piel del resto del sitio. */
.ast-single-post .entry-title,
.page .entry-title { margin-bottom: .35em; }

/* ==========================================================================
   17. Calculadora de costo por kilometro
   Etiquetas visibles asociadas, resultado anunciado por region viva.
   ========================================================================== */

.cec-calc {
  margin-block: 1.6em 2.4em;
  padding: var(--cec-md);
  border: 1px solid var(--cec-line);
  border-radius: var(--cec-r-md);
  background: var(--cec-surface);
  max-width: 100%;
}

.cec-calc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--cec-sm) var(--cec-md);
}

.cec-calc__hint {
  margin: 6px 0 0;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--cec-muted);
  max-width: 34ch;
}

.cec-calc__out {
  margin: var(--cec-md) 0 0;
  padding-top: var(--cec-sm);
  border-top: 1px solid var(--cec-line);
  font-family: var(--cec-font-head);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.35;
  color: var(--cec-ink);
  max-width: none;
}

.cec-calc__out b { color: var(--cec-accent); font-weight: 600; }

.cec-calc__out .cec-calc__aside {
  display: block;
  margin-top: .5em;
  font-family: var(--cec-font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--cec-muted);
}

/* ==========================================================================
   18. Listados de archivo (modelos, puntos de carga, categorias)
   ========================================================================== */

.cec-archive { border-top: 1px solid var(--cec-line); margin-top: var(--cec-md); }

.cec-archive__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--cec-xs) var(--cec-md);
  padding: 24px 4px;
  border-bottom: 1px solid var(--cec-line);
}

/* Con miniatura, la fila pasa a tres columnas: imagen, texto y dato. */
.cec-archive__item.has-img {
  grid-template-columns: 168px minmax(0, 1fr) auto;
  align-items: center;
}

.cec-archive__img {
  grid-row: 1 / span 2;
  display: block;
  border-radius: var(--cec-r-md);
  overflow: hidden;
  border: 1px solid var(--cec-line);
  background: var(--cec-surface);
  line-height: 0;
}

.cec-archive__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  transition: transform .25s var(--cec-ease);
}

.cec-archive__item.has-img:hover .cec-archive__img img { transform: scale(1.03); }
.cec-archive__item.has-img h2 { grid-column: 2; }
.cec-archive__item.has-img .cec-archive__meta { grid-column: 3; align-self: center; }
.cec-archive__item.has-img .cec-archive__desc { grid-column: 2 / -1; }

.cec-archive__item h2 {
  margin: 0;
  border: 0;
  padding: 0;
  font-size: 1.4rem;
  max-width: none;
}

.cec-archive__item h2 a { color: var(--cec-ink); text-decoration: none; }
.cec-archive__item h2 a:hover { color: var(--cec-accent); }

.cec-archive__meta {
  font-family: var(--cec-font-body);
  font-size: 1rem;
  color: var(--cec-accent);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.cec-archive__desc {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--cec-muted);
  font-size: 1rem;
  max-width: 68ch;
}

/* Ficha tecnica de la fila. Va en linea aparte para no competir con el resumen. */
.cec-archive__sub {
  display: block;
  margin-top: 6px;
  color: var(--cec-ink);
  font-size: .9375rem;
}

/* Paginacion del listado. */
html .navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--cec-xs); margin-top: var(--cec-md); }
html .navigation.pagination .page-numbers {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--cec-line);
  border-radius: var(--cec-r-sm);
  color: var(--cec-ink);
  text-decoration: none;
}
html .navigation.pagination .page-numbers.current {
  background: var(--cec-accent);
  border-color: var(--cec-accent);
  color: var(--cec-on-accent);
  font-weight: 700;
}
html .navigation.pagination a.page-numbers:hover { border-color: var(--cec-accent); }

/* Por debajo de 900px la columna de texto se estrechaba a 166px entre la
   miniatura y el precio. La miniatura encoge primero y el dato baja de linea. */
@media (max-width: 900px) {
  .cec-archive__item.has-img {
    grid-template-columns: 116px minmax(0, 1fr);
    align-items: start;
  }
  .cec-archive__item.has-img .cec-archive__meta { grid-column: 2; text-align: left; }
  .cec-archive__item.has-img .cec-archive__desc { grid-column: 2; }
}

@media (max-width: 640px) {
  .cec-archive__item { grid-template-columns: 1fr; }
  .cec-archive__meta { text-align: left; }

  .cec-archive__item.has-img { grid-template-columns: 92px minmax(0, 1fr); gap: 4px 16px; }
  .cec-archive__item.has-img h2 { font-size: 1.2rem; }
}

/* El foco no debe quedar tapado por cabeceras fijas (WCAG 2.4.11). */
html { scroll-padding-top: 96px; }

.skip-link:focus,
.screen-reader-text:focus {
  background: var(--cec-accent);
  color: var(--cec-on-accent);
  font-family: var(--cec-font-body);
  font-weight: 700;
  padding: 14px 22px;
  border-radius: var(--cec-r-sm);
  z-index: 100000;
}

/* Objetivos tactiles con separacion suficiente. */
.cec-btn,
.main-navigation a,
.cec-nav a,
.cec-list a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ==========================================================================
   5. Botones
   ========================================================================== */

.cec-btn,
.wp-block-button__link,
.elementor-button {
  font-family: var(--cec-font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 14px 28px;
  min-height: 48px;
  border-radius: var(--cec-r-pill);
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: transform .18s var(--cec-ease), background-color .18s var(--cec-ease), border-color .18s var(--cec-ease);
}

.cec-btn--primary,
.wp-block-button__link,
.elementor-button {
  background: var(--cec-accent);
  color: var(--cec-on-accent);
  border: 1px solid var(--cec-accent);
}

.cec-btn--primary:hover,
.wp-block-button__link:hover,
.elementor-button:hover {
  background: #EFC463;
  border-color: #EFC463;
  color: var(--cec-on-accent);
  transform: translateY(-1px);
}

.cec-btn--primary:active { transform: translateY(1px); }

/* La especificidad se sube a proposito: Elementor genera reglas propias para
   .elementor-widget-button .elementor-button y el secundario debe ganarlas. */
.cec-btn--ghost,
.elementor-widget-button .elementor-button.cec-btn--ghost {
  background: transparent;
  background-color: transparent;
  color: var(--cec-ink);
  border: 1px solid var(--cec-bronze);
}

.cec-btn--ghost:hover,
.elementor-widget-button .elementor-button.cec-btn--ghost:hover {
  background-color: transparent;
  border-color: var(--cec-accent);
  color: var(--cec-ink);
  transform: translateY(-1px);
}

/* ==========================================================================
   6. Superficies y forma. Profundidad por capas de color, no por sombra.
   ========================================================================== */

.cec-card {
  background: var(--cec-surface);
  border: 1px solid var(--cec-line);
  border-radius: var(--cec-r-md);
  padding: var(--cec-md);
}

.cec-rule { border: 0; border-top: 1px solid var(--cec-line); margin: 0; }

.cec-shell {
  max-width: var(--cec-shell);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

.cec-section { padding-block: clamp(var(--cec-lg), 9vw, var(--cec-xl)); }

/* ==========================================================================
   7. Tablas de datos: scroll dentro de su contenedor, nunca en la pagina.
   ========================================================================== */

.cec-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--cec-line);
  border-radius: var(--cec-r-md);
  -webkit-overflow-scrolling: touch;
}

.cec-tablewrap:focus-visible { outline: 3px solid var(--cec-accent); outline-offset: 2px; }

.cec-table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 620px; }
.cec-table caption { text-align: left; padding: var(--cec-sm) var(--cec-md); color: var(--cec-muted); font-size: .9375rem; }
.cec-table th, .cec-table td { padding: 14px var(--cec-sm); text-align: left; border-bottom: 1px solid var(--cec-line); }
.cec-table thead th { background: var(--cec-raised); color: var(--cec-ink); font-family: var(--cec-font-body); font-weight: 700; font-size: .9375rem; }
.cec-table tbody tr:last-child td { border-bottom: 0; }
.cec-table td b, .cec-table td strong { color: var(--cec-accent); font-weight: 700; }

/* ==========================================================================
   8. Imagenes integradas con la luz del fondo, no pegadas encima.
   ========================================================================== */

.cec-figure { position: relative; border-radius: var(--cec-r-md); overflow: hidden; }

.cec-figure::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: var(--cec-glow);
  pointer-events: none;
  z-index: 0;
}

.cec-figure > img,
.cec-figure > svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; }

img { max-width: 100%; height: auto; }

/* ==========================================================================
   9. Movimiento: elegante pero discreto. Solo transform y opacity.
   Si el script nunca corre, el contenido queda visible igualmente.
   ========================================================================== */

/* Solo se oculta si el JS confirmo que puede revelarlo. Sin JS todo es visible. */
.cec-js .cec-reveal { opacity: 0; transform: translateY(14px); }
.cec-js .cec-reveal.is-in { opacity: 1; transform: none; transition: opacity .5s var(--cec-ease), transform .5s var(--cec-ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .cec-reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   10. Cabecera, navegacion y pie
   Navegacion de una sola linea en escritorio.
   ========================================================================== */

.site-header,
.ast-primary-header-bar,
.ast-header-break-point .site-header {
  background: rgba(20,16,13,.92);
  border-bottom: 1px solid var(--cec-line);
  backdrop-filter: saturate(140%) blur(10px);
}

.main-navigation .menu-item > a,
.ast-builder-menu .menu-item > a {
  font-family: var(--cec-font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--cec-ink);
}

.main-navigation .menu-item > a:hover { color: var(--cec-accent); }

/* La pagina actual no se marca solo con color: lleva ademas un filete. */
.main-navigation .current-menu-item > a,
.ast-builder-menu .current-menu-item > a {
  color: var(--cec-accent);
  box-shadow: inset 0 -2px 0 0 var(--cec-accent);
}

.site-footer, .ast-footer-overlay {
  background: var(--cec-surface);
  border-top: 1px solid var(--cec-line);
  color: var(--cec-muted);
}

.site-footer a { color: var(--cec-ink); }

/* ==========================================================================
   11. Formularios (WPForms y nativos): etiqueta visible, error con texto.
   ========================================================================== */

input[type=text], input[type=email], input[type=search], input[type=tel],
input[type=url], input[type=number], select, textarea,
.wpforms-field input, .wpforms-field select, .wpforms-field textarea {
  background: var(--cec-raised);
  color: var(--cec-ink);
  border: 1px solid var(--cec-line);
  border-radius: var(--cec-r-sm);
  font-family: var(--cec-font-body);
  font-size: 1.0625rem;
  min-height: 48px;
  padding: 12px 14px;
  width: 100%;
}

::placeholder { color: var(--cec-muted); opacity: 1; }

label, .wpforms-field-label {
  font-family: var(--cec-font-body);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--cec-ink);
  display: block;
  margin-bottom: 6px;
}

.wpforms-error, .wpforms-required-label { color: #F2A98F; font-weight: 500; }

/* ==========================================================================
   12. Ajustes de Elementor para que herede los tokens del tema
   ========================================================================== */

.elementor-widget-text-editor,
.elementor-widget-theme-post-content { color: var(--cec-ink); }

.elementor-section, .e-con { max-width: 100%; }

/* ==========================================================================
   13. Responsive: sin scroll horizontal en ninguna anchura.
   ========================================================================== */

html, body { overflow-x: clip; max-width: 100%; }

@media (max-width: 880px) {
  :root { --cec-xl: 72px; --cec-lg: 48px; }
  h1, .entry-title { font-size: clamp(2.125rem, 8.5vw, 3rem); }
}

/* ==========================================================================
   14. Portada
   Cada seccion usa una familia de layout distinta: split asimetrico,
   franja de datos, lista editorial con filetes, bento desigual y acordeon.
   Ninguna fila de tres tarjetas identicas.
   ========================================================================== */

/* --- 14.1 Hero: split asimetrico, cabe en la primera pantalla --- */

/* La reticula la pone Elementor con su propio flex; aqui solo va la piel,
   asi no hay pelea de especificidad con el CSS que genera el constructor. */
.cec-hero { position: relative; }

.cec-hero__text { max-width: 34rem; }

.cec-hero h1 {
  margin: 0 0 var(--cec-sm);
  font-size: clamp(2.6rem, 5vw, 4.1rem);
  line-height: 1.03;
}

.cec-hero .cec-lead { margin: 0 0 var(--cec-md); }

.cec-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cec-sm);   /* separacion entre objetivos tactiles */
}

/* La luz calida detras del vehiculo lo integra con el fondo en lugar de
   dejarlo pegado encima de la pagina. */
.cec-hero__art {
  position: relative;
  min-height: clamp(240px, 34vw, 400px);
  display: grid;
  place-items: center;
}

.cec-hero__art::before {
  content: "";
  position: absolute;
  inset: -18% -10%;
  background: var(--cec-glow);
  pointer-events: none;
}

/* Reflejo del suelo: el vehiculo se apoya en la pagina, no flota sobre ella. */
.cec-hero__art::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cec-bronze) 22%, var(--cec-accent) 50%, var(--cec-bronze) 78%, transparent);
  opacity: .55;
}

.cec-hero__art svg { position: relative; width: 100%; height: auto; }

/* --- 14.2 Franja de datos: cifras reales, sin contenedor de tarjeta --- */

.cec-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--cec-md);
  padding-block: var(--cec-md);
  border-top: 1px solid var(--cec-line);
  border-bottom: 1px solid var(--cec-line);
}

.cec-stat__num {
  display: block;
  font-family: var(--cec-font-head);
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--cec-accent);
}

.cec-stat__label {
  display: block;
  margin-top: 6px;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--cec-muted);
  max-width: 22ch;
}

/* --- 14.3 Encabezado de seccion --- */

.cec-head { margin-bottom: var(--cec-md); max-width: 46rem; }
.cec-head h2 { margin: 0 0 var(--cec-xs); }
.cec-head p { margin: 0; color: var(--cec-muted); font-size: 1.0625rem; }

/* --- 14.4 Lista editorial con filetes: no tarjetas --- */

.cec-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cec-line); }
.cec-list > li { border-bottom: 1px solid var(--cec-line); }

.cec-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--cec-sm);
  padding: 22px 4px;
  text-decoration: none;
  color: var(--cec-ink);
  transition: color .18s var(--cec-ease), transform .18s var(--cec-ease);
}

.cec-list a:hover { color: var(--cec-accent); transform: translateX(10px); }

.cec-list__title { font-family: var(--cec-font-head); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.cec-list__note { font-family: var(--cec-font-body); font-size: .9375rem; color: var(--cec-muted); text-align: right; }

/* --- 14.5 Bento desigual: tantas celdas como contenido, con fondos variados --- */

.cec-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--cec-sm);
}

.cec-bento > * { grid-column: span 2; }
.cec-bento > .is-wide { grid-column: span 4; }
.cec-bento > .is-tall { grid-column: span 3; }

.cec-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--cec-xs);
  min-height: 190px;
  padding: var(--cec-md);
  border: 1px solid var(--cec-line);
  border-radius: var(--cec-r-md);
  background: var(--cec-surface);
  color: var(--cec-ink);
  text-decoration: none;
  transition: border-color .2s var(--cec-ease), transform .2s var(--cec-ease);
}

.cec-tile:hover { border-color: var(--cec-bronze); transform: translateY(-2px); }
.cec-tile h3 { margin: 0; font-size: 1.35rem; }
.cec-tile p { margin: 0; color: var(--cec-muted); font-size: .9375rem; max-width: none; }

.cec-tile--lit { background: var(--cec-raised); background-image: var(--cec-glow); }
.cec-tile--plain { background: transparent; }

/* --- 14.6 Preguntas frecuentes: details nativo, accesible por teclado --- */

.cec-faq { border-top: 1px solid var(--cec-line); max-width: 52rem; }
.cec-faq details { border-bottom: 1px solid var(--cec-line); }

.cec-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cec-sm);
  padding: 20px 4px;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--cec-font-head);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--cec-ink);
  list-style: none;
}

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

/* El estado abierto no se comunica solo con color: el signo cambia de forma. */
.cec-faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--cec-font-body);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--cec-accent);
}

.cec-faq details[open] summary::after { content: "\2212"; }
.cec-faq details > div { padding: 0 4px 22px; color: var(--cec-muted); }
.cec-faq details > div p { margin: 0 0 .8em; }
.cec-faq details > div p:last-child { margin-bottom: 0; }

/* --- 14.7 Cierre --- */

.cec-closing {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--cec-md);
  align-items: end;
  padding: clamp(var(--cec-md), 4vw, var(--cec-lg));
  border: 1px solid var(--cec-line);
  border-radius: var(--cec-r-md);
  background: var(--cec-surface);
  background-image: var(--cec-glow);
}

.cec-closing h2 { margin: 0 0 var(--cec-xs); }
.cec-closing p { margin: 0; color: var(--cec-muted); }

/* --- 14.8 Colapso movil declarado para cada cuadricula --- */

@media (max-width: 1000px) {
  .cec-bento > *,
  .cec-bento > .is-wide,
  .cec-bento > .is-tall { grid-column: span 3; }
}

@media (max-width: 860px) {
  .cec-hero__text { max-width: none; }
  .cec-hero__art { min-height: 200px; }
  .cec-bento { grid-template-columns: 1fr; }
  .cec-bento > *,
  .cec-bento > .is-wide,
  .cec-bento > .is-tall { grid-column: span 1; }
  .cec-closing { grid-template-columns: 1fr; align-items: start; }
  .cec-list a { grid-template-columns: 1fr; gap: 4px; }
  .cec-list__note { text-align: left; }
}



/* ==========================================================================
   15. Correcciones de herencia
   Astra y el kit de Elementor generan sus propias reglas con especificidad
   alta. Cada regla de aqui corrige un fallo medido en el render real, no una
   suposicion, y el comentario dice cual.
   ========================================================================== */

/* Astra imponia 15.5px al cuerpo. El minimo legible del proyecto es 17px. */
html body,
html body .ast-container,
html body .entry-content,
html body .elementor-widget-text-editor {
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* El texto del boton salia dorado sobre dorado, es decir contraste 1:1.
   Ahora queda tinta #17110A sobre dorado #E0B24C, que da 9.49:1. */
html .entry-content a.cec-btn--primary,
html a.cec-btn.cec-btn--primary,
html .is-cec-primary .elementor-button,
html .wp-block-button .wp-block-button__link {
  background-color: var(--cec-accent);
  color: var(--cec-on-accent);
  border: 1px solid var(--cec-accent);
  text-decoration: none;
}

html .entry-content a.cec-btn--primary:hover,
html a.cec-btn.cec-btn--primary:hover,
html .is-cec-primary .elementor-button:hover,
html .wp-block-button .wp-block-button__link:hover {
  background-color: #EFC463;
  border-color: #EFC463;
  color: var(--cec-on-accent);
}

/* Secundario: crema sobre el fondo, con borde bronce. Da 16.43:1. */
html .entry-content a.cec-btn--ghost,
html a.cec-btn.cec-btn--ghost,
html .is-cec-ghost .elementor-button {
  background-color: transparent;
  color: var(--cec-ink);
  border: 1px solid var(--cec-bronze);
  text-decoration: none;
}

html .entry-content a.cec-btn--ghost:hover,
html a.cec-btn.cec-btn--ghost:hover,
html .is-cec-ghost .elementor-button:hover {
  background-color: transparent;
  border-color: var(--cec-accent);
  color: var(--cec-ink);
}

/* Los titulares salian dorados enteros. Solo el enfasis va en dorado. */
html h1, html h2, html h3, html h4, html h5, html h6,
html .elementor-widget-heading .elementor-heading-title {
  color: var(--cec-ink);
  font-family: var(--cec-font-head);
}

html h1 em, html h2 em, html h3 em,
html .elementor-heading-title em {
  color: var(--cec-accent);
}

/* El kit de Elementor cierra la pila con Sans-serif; el respaldo debe ser serif. */
html .elementor-widget-heading .elementor-heading-title,
html .elementor-widget-heading h1,
html .elementor-widget-heading h2 {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
}

/* El H1 se rompia a tres lineas en anchuras intermedias. */
html .cec-hero h1,
html .cec-hero .elementor-heading-title {
  font-size: clamp(2.35rem, 4.6vw, 4rem);
  line-height: 1.05;
  text-wrap: balance;
}

/* La entradilla vive dentro del widget de texto de Elementor. */
html .cec-lead,
html .cec-lead p {
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  line-height: 1.6;
  color: var(--cec-muted);
  max-width: 34em;
}

/* El wrapper del boton en Elementor no debe heredar el alto minimo del enlace. */
html .is-cec-primary, html .is-cec-ghost { min-height: 0; display: block; }

/* Astra fija la raiz en 14.6px, lo que encogia todos los tamanos en rem y
   dejaba textos de 13.7px. La raiz vuelve a 16px y el cuerpo a 17px.
   El !important es necesario porque el CSS dinamico de Astra se imprime
   despues de esta hoja. */
html { font-size: 100% !important; }

/* El fondo se declara en las dos capas. Al pasar Astra al layout plano, html y
   body quedaron transparentes y el navegador pintaba blanco detras de toda la
   pagina. Un fondo heredado no es un fondo: hay que declararlo. */
html,
html body {
  background-color: var(--cec-bg) !important;
}

/* El pie inferior del constructor de Astra venia en blanco. */
html .site-below-footer-wrap,
html .site-above-footer-wrap,
html .site-primary-footer-wrap,
html .ast-below-footer-wrap,
html footer.site-footer {
  background-color: var(--cec-surface) !important;
  color: var(--cec-muted) !important;
}

html .site-below-footer-wrap *,
html .site-primary-footer-wrap * {
  color: var(--cec-muted) !important;
}

html .site-below-footer-wrap a,
html .site-primary-footer-wrap a {
  color: var(--cec-ink) !important;
  text-decoration: none;
}

html .site-below-footer-wrap a:hover,
html .site-primary-footer-wrap a:hover {
  color: var(--cec-accent) !important;
}

html body,
html body .ast-container,
html body p,
html body li {
  font-size: 1.0625rem !important;   /* 17px */
}

/* Textos de apoyo: nunca por debajo de 15px reales. */
html .cec-stat__label,
html .cec-list__note,
html .cec-tile p,
html .cec-head p {
  font-size: 1rem !important;        /* 16px */
}

/* La cabecera y el pie de Astra venian con texto casi del color del fondo. */
html .site-title, html .site-title a,
html .ast-site-identity .site-title a {
  color: var(--cec-ink) !important;
  font-family: var(--cec-font-head);
  font-weight: 600;
}

html .site-title a:hover { color: var(--cec-accent) !important; }

html .site-description,
html .ast-site-identity .site-description {
  color: var(--cec-muted) !important;
}

html .site-footer,
html .ast-footer-copyright,
html .ast-footer-copyright *,
html .site-footer .ast-builder-html-element {
  color: var(--cec-muted) !important;
  background-color: var(--cec-surface);
}

html .site-footer a { color: var(--cec-ink) !important; }
html .site-footer a:hover { color: var(--cec-accent) !important; }

/* El enlace de salto debe hacerse visible y grande al recibir el foco. */
html .skip-link:focus {
  position: fixed !important;
  top: 12px !important;
  left: 12px !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ==========================================================================
   19. Cabecera del constructor de Astra
   Astra construye la cabecera con su propio Header Builder y esas reglas
   ganaban a las del apartado 10. El menu quedaba en gris frio rgb(51,65,85),
   que da 1.83:1 sobre el fondo y ademas rompe la temperatura de la paleta.
   El panel movil venia con fondo blanco.
   ========================================================================== */

html .main-header-menu .menu-link,
html .main-header-menu > .menu-item > a,
html .ast-builder-menu .menu-item > a,
html .site-navigation .menu-item > a,
html .ast-mobile-header-content .menu-item > a,
html .ast-hfb-header .menu-item > a {
  color: var(--cec-ink) !important;
  font-family: var(--cec-font-body);
  font-weight: 500;
}

html .main-header-menu .menu-link:hover,
html .ast-builder-menu .menu-item > a:hover,
html .site-navigation .menu-item > a:hover {
  color: var(--cec-accent) !important;
}

/* La pagina actual no se senala solo con color: lleva ademas un filete. */
html .main-header-menu .current-menu-item > a,
html .ast-builder-menu .current-menu-item > a,
html .site-navigation .current-menu-item > a {
  color: var(--cec-accent) !important;
  box-shadow: inset 0 -2px 0 0 var(--cec-accent);
}

html .site-primary-header-wrap,
html .ast-primary-header-bar,
html .ast-mobile-header-content,
html .ast-mobile-header-wrap .main-header-bar-wrap {
  background-color: var(--cec-bg) !important;
  border-bottom: 1px solid var(--cec-line);
}

html .ast-mobile-header-content { border-bottom: 0; }

/* Boton hamburguesa y su icono. */
html .ast-mobile-menu-trigger-minimal,
html .menu-toggle,
html .ast-button-wrap .menu-toggle {
  background-color: transparent !important;
  color: var(--cec-ink) !important;
  border: 1px solid var(--cec-line);
  border-radius: var(--cec-r-sm);
}

html .menu-toggle .ast-mobile-svg { fill: var(--cec-ink); }

/* ==========================================================================
   20. Composicion del hero en escritorio
   Elementor repartia las dos columnas casi al 50 por ciento y la composicion
   quedaba centrada. La direccion pide varianza media alta, es decir una
   asimetria legible sin acrobacias.
   ========================================================================== */

@media (min-width: 1025px) {
  /* Sin el combinador de hijo directo: Elementor intercala un .e-con-inner
     entre el contenedor y sus columnas cuando la seccion es de ancho fijo. */
  html .cec-hero .cec-hero__text { flex: 0 1 57%; max-width: 57%; }
  html .cec-hero .cec-hero__art  { flex: 0 1 39%; max-width: 39%; }

  /* A 64px el titular caia a tres lineas. La direccion permite dos como maximo. */
  html .cec-hero h1,
  html .cec-hero .elementor-heading-title {
    font-size: clamp(3rem, 3.9vw, 3.5rem);
    line-height: 1.04;
  }
}

/* ==========================================================================
   21. Contenedor de entradas de Astra
   Astra pinta de blanco el contenedor de articulo en la plantilla de entrada,
   asi que el texto crema quedaba a 1.15:1 sobre fondo claro: ilegible. Aqui
   ese contenedor pasa a la superficie chocolate del sistema, que da 15.22:1.
   ========================================================================== */

html .ast-separate-container,
html .ast-separate-container .ast-article-single,
html .ast-separate-container .ast-article-post,
html .ast-separate-container .comments-area .comment-respond,
html .ast-separate-container .ast-comment-list li,
html .ast-plain-container,
html .ast-page-builder-template,
html #primary,
html #content,
html .site-content {
  background-color: transparent;
}

/* Red de seguridad: el layout plano de Astra ya evita la caja blanca, pero su
   CSS dinamico se imprime despues de esta hoja y podria reponerla. */
html .ast-separate-container .ast-article-single,
html .ast-separate-container .ast-article-post,
html .ast-article-single,
html .ast-article-post,
html article.post,
html article.page,
html .ast-separate-container .comment-respond {
  background-color: transparent !important;
  border: 0;
}

/* Navegacion entre entradas: estaba en 13.6px y sin traducir. */
html .post-navigation .nav-links a,
html .ast-navigation-links a,
html .post-navigation .nav-links {
  font-size: 1rem;
  color: var(--cec-ink);
}

html .post-navigation .nav-links .nav-previous span,
html .post-navigation .nav-links .nav-next span,
html .ast-post-nav {
  font-size: .9375rem;
  color: var(--cec-muted);
  letter-spacing: .06em;
}

html .ast-separate-container .entry-content,
html .ast-article-single .entry-content,
html .ast-article-post .entry-content,
html .entry-content p,
html .entry-content li,
html .entry-content td,
html .entry-content th {
  color: var(--cec-ink);
}

/* Metadatos de la entrada. Nunca por debajo de 15px ni en gris frio. */
html .entry-meta,
html .entry-meta *,
html .ast-blog-meta-container,
html .ast-blog-meta-container * ,
html .post-meta,
html .ast-comment-meta {
  color: var(--cec-muted) !important;
  font-family: var(--cec-font-body);
  font-size: .9375rem !important;
}

html .entry-meta a { color: var(--cec-accent) !important; }

/* Barra lateral y widgets, por si se activan mas adelante. */
html .widget, html .sidebar-main, html .secondary {
  background-color: transparent;
  color: var(--cec-ink);
}
html .widget-title, html .widget h2 { color: var(--cec-ink); }

/* Navegacion entre entradas. */
html .post-navigation a, html .nav-links a { color: var(--cec-ink); }
html .post-navigation a:hover, html .nav-links a:hover { color: var(--cec-accent); }

/* Ningun texto del sitio baja de 15px. */
html .ast-separate-container .entry-content > *,
html .comment-form p,
html .comment-notes,
html .logged-in-as {
  font-size: 1.0625rem;
}

html .cec-tablewrap .cec-table th,
html .cec-tablewrap .cec-table td { font-size: 1rem; }
html .cec-table caption { font-size: .9375rem; }

/* ==========================================================================
   22. Ajustes de movil
   Van al final a proposito: corrigen reglas anteriores y en igualdad de
   especificidad gana la ultima de la cascada.
   ========================================================================== */

/* En movil el hero se desbordaba de la primera pantalla por cuatro pixeles y
   el titular caia a tres lineas. Se ajustan las tres alturas que lo componen
   para que el boton principal quede siempre visible sin hacer scroll. */
@media (max-width: 600px) {
  html .cec-hero h1,
  html .cec-hero .elementor-heading-title {
    font-size: clamp(1.95rem, 8.2vw, 2.35rem);
    line-height: 1.08;
  }

  html .cec-lead,
  html .cec-lead p { font-size: 1.0625rem; line-height: 1.5; }

  .cec-hero__art { min-height: 148px; }
}

@media (max-width: 420px) {
  .cec-hero__actions .cec-btn,
  .cec-hero__actions .elementor-button { width: 100%; justify-content: center; }
}