/* Criterio · adaptación al CMS (CMS 1.1). La hoja criterio.css es la del
   paquete de diseño, sin cambios; esta suma lo que el diseño no preveía:
   piezas del CMS (marcadores del editor, capacidades, reseñas sin JS),
   módulos y la composición libre. Todo con clases cr- o dentro de .cr-theme. */
.cr-theme main{display:block}
.cr-header{position:relative}
.cr-header .cr-nav{position:static}
@media(max-width:760px){.cr-header .cr-nav{position:absolute;top:100%}}
.cr-logo-texto{font-size:20px;font-weight:650;letter-spacing:-.6px}
.cr-nav>a[aria-current]:not(.cr-button){color:var(--cr-ink);text-decoration:underline;text-underline-offset:5px}
.cr-vacio{margin-top:24px;padding:18px 20px;border:1px dashed var(--cr-line);border-radius:8px;color:var(--cr-muted);font-size:14px}
.cr-hero h1{text-wrap:balance}
.cr-service--sin-ejemplo{grid-template-columns:.65fr 2.9fr}
.cr-service-message>p+p{margin-top:10px}
@media(max-width:760px){.cr-service-message h3{font-size:21px;line-height:1.4}}
/* Capacidades (Google Ads, Meta Ads, SEO…): una fila compacta debajo de las franjas. */
.cr-capacidades{display:grid;grid-template-columns:.65fr 2.9fr;gap:34px;padding:34px 0;border-bottom:1px solid var(--cr-line)}
.cr-capacidades h3{font-size:22px;line-height:1.35;letter-spacing:-.5px;font-weight:500;margin-top:8px!important}
.cr-capacidades ul{list-style:none;margin:0;padding:0 0 0 29px;border-left:1px solid var(--cr-line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 34px}
.cr-capacidades li strong{display:block;font-size:15px;font-weight:550}
.cr-capacidades li span{display:block;font-size:13px;line-height:1.7;color:var(--cr-muted);margin-top:4px}
@media(max-width:760px){.cr-capacidades{grid-template-columns:1fr;gap:18px}.cr-capacidades ul{padding:0;border:0;grid-template-columns:1fr}.cr-service--sin-ejemplo{grid-template-columns:1fr}}
/* Quién firma: retrato opcional y etapas numeradas. */
.cr-about-foto{width:160px;height:200px;object-fit:cover;border-radius:6px;margin-top:24px;filter:grayscale(1)}
.cr-about-copy p+p{margin-top:16px}
a.cr-about-note:hover{border-color:var(--cr-ink)}
.cr-method-section{padding-top:20px}
/* Reseñas: con JavaScript se ve una; sin él (y en el editor), todas. */
.cr-resenas{padding-top:40px;padding-bottom:40px}
.cr-resenas-titulo{font-size:13px;font-weight:450;color:var(--cr-muted);text-align:center;margin-top:8px!important}
.cr-testimonials>.cr-label{text-align:center}
.cr-resenas-lista>.cr-quote+.cr-quote{margin-top:40px}
[data-cr-resenas].cr-con-js .cr-resenas-lista>.cr-quote+.cr-quote{margin-top:0}
.cr-resenas-accion{text-align:center;margin-top:18px!important}
/* Proyectos: las tres partes dentro del desplegable. */
.cr-project-heading{margin-top:17px}
.cr-project-parte+.cr-project-parte{margin-top:14px}
.cr-project-parte .cr-label{display:block;margin-bottom:4px}
.cr-project-imagen{margin-top:18px;border-radius:6px;max-height:360px;width:auto;filter:grayscale(1)}
/* Contacto: la presentación sin su propio contenedor (va dentro de la página). */
.cr-contacto-intro{text-align:left;padding-top:10px;padding-bottom:10px}
.cr-contacto-intro>p{margin-left:0}
/* El sitio común usa rótulos y botones de Tailwind en componentes que Criterio
   no redibuja (formulario, canales, composición): toman su tipografía. */
.cr-theme .btn-primary,.cr-theme .btn-secondary{font-family:var(--cr-font)}
/* Tienda: la cabecera de Criterio no es fija, así que la barra de la tienda se pega arriba. */
.cr-theme .tienda-barra{top:0}
@media print{.cr-header .cr-menu,.cr-quote-controls{display:none!important}}
/* Texto solo para lectores de pantalla. */
.cr-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Contacto según el objetivo: sin JavaScript se ven todas las opciones, cada una con su botón. */
.cr-focus-resultados{display:grid;gap:18px}
.cr-focus-opcion{font-size:12px;color:var(--cr-muted);margin:0 0 4px!important}
[data-cr-objetivos].cr-con-js .cr-focus-opcion{display:none}
.cr-about-enlace{margin-top:18px!important}
.cr-project-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cr-proofbar-clients span{white-space:nowrap}

/* Detalle de servicio con portada en la página: titula con H2 (un solo H1),
   con el mismo aspecto que el H1 del tema. */
.cr-page-intro h2{font-size:clamp(37px,4.5vw,59px);font-weight:600;line-height:1.15;letter-spacing:-2px;margin-top:23px}
.cr-page-intro h2 span{display:block}
@media(max-width:760px){.cr-page-intro h2{font-size:clamp(33px,8.5vw,47px);letter-spacing:-1.2px;line-height:1.17;margin-top:19px}.cr-page-intro h2 span{display:inline}}

/* Reseñas (CMS 1.1.1): foto en el avatar, enlace bajo el nombre y «Pausar». */
.cr-review-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.cr-review-link{display:inline-block;font-size:12px;color:var(--cr-ink);border-bottom:1px solid #a5a5a0;padding:2px 0;margin-top:4px;min-height:24px}
.cr-review-link:hover{border-color:var(--cr-ink)}

/* Piezas de la composición (CMS 1.2): banda de servicio y etiquetas. */
.cr-service--pieza{border-top:1px solid var(--cr-line)}
.cr-service--pieza+.cr-service--pieza{border-top:0}
ul.cr-etiquetas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
ul.cr-etiquetas.comp-al-centro{justify-content:center}
ul.cr-etiquetas.comp-al-fin{justify-content:flex-end}
.cr-etiquetas-relleno .cr-tag{background:var(--cr-ink);color:#fff;border-color:var(--cr-ink)}
.comp-etiqueta-vacia{opacity:.6;font-style:italic}

/* ── Bloques de la composición con el aspecto de Criterio (CMS 1.4) ──
   Los tamaños van en em sobre la base del bloque: «Letra › Tamaño» los
   escala en proporción. */
.cr-theme .comp-vacio{color:var(--cr-muted)}
.cr-theme .comp-carrusel-flecha{border-color:var(--cr-line);color:var(--cr-ink)}
.cr-theme .comp-carrusel-flecha:hover{background:#ececea;border-color:#babab6}
.cr-theme .comp-carrusel-puntos button::after{background:#d2d2cd}
.cr-theme .comp-carrusel-puntos button[aria-pressed="true"]::after{background:#333330}

.cr-theme .comp-resena-cita{font-size:1.5em;line-height:1.6;letter-spacing:-.02em;font-weight:450;color:var(--cr-ink)}
.cr-theme .comp-resena-firma{font-size:.75em;margin-top:1.6em;gap:1.1em}
.cr-theme .comp-resena-avatar{width:4em;height:4em;background:#eeeeea;color:#6b6b68}
.cr-theme .comp-resena-datos strong{font-weight:500;color:#444440;font-size:1.15em}
.cr-theme .comp-resena-datos span{color:var(--cr-muted)}
.cr-theme .comp-resena-datos a{color:var(--cr-ink);text-decoration:none;border-bottom:1px solid #a5a5a0;align-self:flex-start}
@media(max-width:760px){.cr-theme .comp-resena-cita{font-size:1.25em}}

.cr-theme .comp-logos{border-block:1px solid #e7e7e4;padding-block:1.5em}
.cr-theme .comp-logos-titulo{font-size:.75em;color:var(--cr-muted);border-color:var(--cr-line)}
.cr-theme .comp-logo{font-size:1.375em;font-weight:500;letter-spacing:-.04em;color:#454543}

.cr-theme .comp-faq-item{border-color:var(--cr-line);padding:1.15em 0}
.cr-theme .comp-faq-item:first-child{padding-top:0}
.cr-theme .comp-faq-item>summary{font-size:.875em;color:var(--cr-ink)}
.cr-theme .comp-faq-item>summary::after{font-size:1.45em;color:#71716c;opacity:1}
.cr-theme .comp-faq-respuesta{font-size:.8125em;color:var(--cr-muted);padding-right:1.25em}

.cr-theme .comp-lista-item{border-color:var(--cr-line);padding-top:1.5em}
.cr-theme .comp-lista-numero{font-size:.6875em;color:#8a8a84;letter-spacing:.11em}
.cr-theme .comp-lista-titulo{font-size:1.0625em;font-weight:550;letter-spacing:-.02em;margin:1.05em 0 .65em;color:var(--cr-ink)}
.cr-theme .comp-lista-item p{font-size:.8125em;line-height:1.85;color:var(--cr-muted)}

.cr-theme .cr-example--bloque{margin:0}

.cr-theme .comp-objetivos-grupo>legend{font-size:.8125em;color:#5d5d57}
.cr-theme .comp-objetivos-opciones button{border-color:#c9c9c2;color:#4f4f49;font-size:.75em;padding:.75em 1em}
.cr-theme .comp-objetivos-opciones button[aria-pressed="true"]{background:#171717;border-color:#171717;color:#fff}
.cr-theme .comp-objetivos-opciones button[aria-pressed="true"]::before{content:'✓';margin-right:6px}
.cr-theme .comp-objetivo-titulo{font-size:1.1875em;letter-spacing:-.025em;color:var(--cr-ink)}
.cr-theme .comp-objetivo-boton{background:var(--cr-ink);color:#fff;font-size:.875em;border-radius:6px}
.cr-theme .comp-objetivo-boton:hover{background:#343432}
.cr-theme .comp-objetivos-nota{font-size:.625em;color:#82827b}

/* Reseñas de la sección (CMS 1.4): fundido suave entre una y otra, en la
   misma celda (sin saltos de alto), y flechas a los lados de los puntos. */
[data-cr-resenas].cr-con-js .cr-resenas-lista{display:grid}
[data-cr-resenas].cr-con-js .cr-resenas-lista>.cr-quote{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .7s ease,transform .7s ease,visibility 0s linear .7s}
[data-cr-resenas].cr-con-js .cr-resenas-lista>.cr-quote.is-activa{opacity:1;visibility:visible;transform:none;transition:opacity .7s ease,transform .7s ease,visibility 0s}
[data-cr-resenas].cr-con-js .cr-resenas-lista>.cr-quote[hidden]{display:block!important}
.cr-quote-controls{align-items:center}
.cr-quote-controls .cr-quote-flecha{width:40px;height:40px;border:1px solid var(--cr-line);border-radius:999px;display:inline-grid;place-items:center;color:var(--cr-ink);margin-inline:6px;transition:background-color .2s,border-color .2s}
.cr-quote-controls .cr-quote-flecha:after{content:none}
.cr-quote-controls .cr-quote-flecha:hover{background:#ececea;border-color:#babab6}
@media (prefers-reduced-motion: reduce){[data-cr-resenas].cr-con-js .cr-resenas-lista>.cr-quote{transition:none!important}}
@media(max-width:760px){.cr-theme .comp-logo{font-size:1.05em}}
/* CMS 1.5 · los botones de la composición conservan su color de texto:
   «.cr-theme a» (color: inherit) les ganaba y el botón relleno quedaba
   negro sobre negro. */
.cr-theme a.comp-boton-relleno{color:var(--comp-boton-sobre,rgb(var(--sitio-sobre-acento)))}
.cr-theme a.comp-boton-contorno,.cr-theme a.comp-boton-texto{color:var(--comp-boton-texto,var(--cr-ink))}
/* CMS 1.6 · los botones de la composición con el aspecto de los de Criterio
   (.cr-button): esquinas de 6 px, 52 px de alto, letra 14/550 y el contorno
   gris; el ícono hace de flecha. Un estilo propio del botón sigue mandando. */
.cr-theme .comp-boton{border-radius:6px;font-weight:550;font-size:14px;line-height:1.3;gap:14px;transition:background .18s,transform .18s}
.cr-theme .comp-boton.comp-estilo{border-radius:var(--comp-radio,6px)}
.cr-theme .comp-boton-normal{min-height:52px;padding:16px 24px}
.cr-theme .comp-boton-contorno{background:transparent;border-color:var(--comp-boton,#babab6)}
.cr-theme .comp-boton-contorno:hover{background:#ececea}
@media (prefers-reduced-motion:no-preference){.cr-theme .comp-boton-relleno:hover,.cr-theme .comp-boton-contorno:hover{transform:translateY(-2px)}}
.cr-theme .comp-botones{gap:15px}
/* Banderas legibles también en Windows: la fuente solo cubre esos caracteres. */
:root{--cr-font:"Twemoji Country Flags",CrInter,Arial,Helvetica,sans-serif}
/* La composición con la letra de Criterio (Inter Tight local): sin esto,
   encabezados, textos y botones pedían la del tema común, que Criterio no
   carga, y caían en otra fuente. */
.cr-theme [class*="comp-"]{font-family:var(--cr-font)}