:root {
--navy-950:#042C53; --navy-800:#0C447C; --navy-600:#185FA5;
--navy-400:#378ADD; --navy-200:#85B7EB; --navy-100:#B5D4F4; --navy-50:#E6F1FB;
--amber:#FAC775; --amber-900:#412402; --amber-700:#BA7517;
--gris-perla:#F5F4F0; --gris-logo:#D3D1C7; --tinta:#1c1c1c; --tinta-sec:#555;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
section[id], .form-caja { scroll-margin-top:88px; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background:#fff; color:var(--tinta); }
img { max-width:100%; display:block; }
/* ============ HEADER ============ */
.header {
display:flex; align-items:center; gap:24px;
padding:18px 6vw; background:var(--navy-950); position:sticky; top:0; z-index:50;
}
.logo { font-size:20px; font-weight:600; color:var(--navy-50); margin-right:auto; }
.logo span { color:var(--amber); }
.nav { display:flex; gap:22px; align-items:center; font-size:14px; color:var(--navy-100); }
.nav a { color:inherit; text-decoration:none; }
.nav a:hover { color:#fff; }
.header-acciones { display:flex; align-items:center; gap:14px; }
.btn-cta { background:var(--amber); color:var(--amber-900); padding:9px 18px; border-radius:8px; font-weight:600; font-size:14px; text-decoration:none; white-space:nowrap; transition:background .2s ease, transform .2s ease; }
.btn-cta:hover { background:#FBD494; transform:translateY(-1px); }
.hamburguesa {
display:none; background:none; border:none; cursor:pointer; padding:8px;
flex-direction:column; gap:5px;
}
.hamburguesa span { width:24px; height:2.5px; background:var(--navy-50); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
.header.abierto .hamburguesa span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.header.abierto .hamburguesa span:nth-child(2) { opacity:0; }
.header.abierto .hamburguesa span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }
/* ============ HERO ============ */
.hero {
background:
radial-gradient(ellipse 620px 520px at 76% 46%, rgba(55,138,221,.30), transparent 65%),
linear-gradient(155deg, var(--navy-950) 0%, #08386A 42%, var(--navy-800) 78%, #0E4C8A 100%);
position:relative; overflow:hidden; padding:72px 6vw 96px;
}
.hero-inner { position:relative; z-index:1; display:flex; gap:56px; align-items:center; max-width:1080px; margin:0 auto; }
.hero-texto { flex:1; }
.kicker { font-size:15px; color:var(--amber); font-weight:600; margin-bottom:14px; }
.titulo-hero { font-size:clamp(30px,4.5vw,46px); font-weight:700; color:#fff; line-height:1.4; margin-bottom:18px; }
.titulo-hero mark {
background:var(--amber); color:var(--amber-900); padding:2px 10px; border-radius:6px;
box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.parrafo-hero { font-size:17px; color:var(--navy-100); line-height:1.65; margin-bottom:26px; max-width:480px; }
.botones { display:flex; gap:12px; flex-wrap:wrap; }
.btn-p { background:var(--amber); color:var(--amber-900); padding:13px 24px; border-radius:8px; font-weight:600; font-size:15px; text-decoration:none; transition:background .2s ease, transform .2s ease; }
.btn-p:hover { background:#FBD494; transform:translateY(-1px); }
.btn-s { border:1px solid var(--navy-400); color:var(--navy-50); padding:13px 24px; border-radius:8px; font-size:15px; text-decoration:none; }
.ficha-wrap { position:relative; flex-shrink:0; }
.radar {
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
width:760px; height:760px; pointer-events:none; z-index:-1;
}
.anillo { fill:none; stroke:#378ADD; stroke-width:1.5; }
.anillo.pulso { opacity:0; transform-origin:center; transform-box:fill-box; animation:onda 6s ease-out infinite; }
.anillo.pulso.p2 { animation-delay:1.5s; }
.anillo.pulso.p3 { animation-delay:3s; }
.anillo.pulso.p4 { animation-delay:4.5s; }
@keyframes onda {
0% { opacity:0; transform:scale(.98); }
12% { opacity:.45; }
100% { opacity:0; transform:scale(1.85); }
}
.ficha {
position:relative; z-index:1; width:290px; flex-shrink:0; background:#fff;
border-radius:18px; overflow:hidden; box-shadow:0 16px 48px rgba(0,0,0,.3);
}
.ficha-foto { height:340px; background:var(--navy-600); position:relative; }
.ficha-foto img, .ficha-foto svg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ficha-cuerpo { padding:14px 18px 16px; }
.ficha-nombre { font-size:18px; font-weight:700; }
.ficha-linea { font-size:13.5px; color:var(--tinta-sec); margin-top:4px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.estrellas { color:var(--amber-700); letter-spacing:1px; }
.nota { color:var(--tinta); font-weight:600; }
.abierto { color:#1a7f37; font-weight:600; }
.abierto::before {
content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
background:#1a7f37; margin-right:6px; animation:respira 2s ease-in-out infinite;
}
@keyframes respira { 50% { opacity:.35; } }
/* ============ PÍLDORA LOGOS ============ */
.zona-pildora { background:#fff; position:relative; height:100px; }
.pildora {
position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
background:var(--gris-perla); border:1px solid #e4e2db; border-radius:28px;
padding:20px 48px; box-shadow:0 8px 28px rgba(4,44,83,.14);
max-width:min(760px,90vw); z-index:2;
}
.pildora-texto { text-align:center; font-size:14px; color:#5F5E5A; margin-bottom:14px; }
.pildora-texto strong { color:var(--amber-700); }
.cinta { overflow:hidden; }
.cinta-inner { display:flex; align-items:center; width:max-content; animation:desliza 22s linear infinite; }
.cinta-grupo { display:flex; align-items:center; gap:40px; margin-right:40px; margin-top:0; flex-shrink:0; }
.cinta:hover .cinta-inner { animation-play-state:paused; }
.logo-ph { width:88px; height:28px; border-radius:5px; background:var(--gris-logo); flex-shrink:0; }
@keyframes desliza { from { transform:translateX(0); } to { transform:translateX(-50%); } }
/* ============ GENÉRICOS DE SECCIÓN ============ */
.seccion { padding:80px 6vw; }
.seccion-inner { max-width:1080px; margin:0 auto; }
.titulo-seccion { font-size:clamp(24px,3vw,32px); font-weight:700; text-align:center; margin-bottom:10px; }
.sub-seccion { font-size:16px; color:var(--tinta-sec); text-align:center; max-width:560px; margin:0 auto 44px; line-height:1.6; }
.oscuro {
background:linear-gradient(155deg, var(--navy-950) 0%, #08386A 60%, var(--navy-800) 100%);
color:#fff;
}
.oscuro .titulo-seccion { color:#fff; }
.kicker-sec { font-size:13px; color:var(--amber); font-weight:600; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px; }
/* ============ SERVICIOS ============ */
.servicios-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; }
.servicio {
border:1px solid #e8e6df; border-radius:16px; padding:28px 24px; text-align:center;
transition:transform .25s ease, box-shadow .25s ease;
}
.servicio:hover { transform:translateY(-5px); box-shadow:0 14px 34px rgba(4,44,83,.1); }
.servicio-icono {
width:52px; height:52px; border-radius:14px; background:var(--navy-50);
display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
}
.servicio-icono svg { width:26px; height:26px; stroke:var(--navy-800); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.servicio h3 { font-size:17px; margin-bottom:8px; }
.servicio p { font-size:14px; color:var(--tinta-sec); line-height:1.6; }
/* ============ SOBRE MÍ ============ */
.sobre-grid { display:flex; gap:48px; align-items:center; }
.sobre-texto { flex:1.25; }
.sobre-texto h2 { font-size:clamp(24px,3vw,32px); font-weight:700; margin-bottom:14px; }
.sobre-texto h2 em { color:var(--amber); font-style:normal; }
.sobre-texto p { font-size:15.5px; color:var(--navy-100); line-height:1.7; margin-bottom:14px; }
.btn-linkedin {
display:inline-flex; align-items:center; gap:8px; border:1px solid var(--navy-400);
color:var(--navy-50); padding:11px 18px; border-radius:8px; font-size:14px; text-decoration:none; margin-top:6px;
transition:background .2s ease, border-color .2s ease;
}
.btn-linkedin:hover { background:rgba(255,255,255,.14); }
.btn-linkedin svg { width:16px; height:16px; fill:currentColor; }
.cifras { flex:1; display:flex; flex-direction:column; gap:12px; }
.cifra {
background:rgba(255,255,255,.06); border:1px solid rgba(133,183,235,.25);
border-radius:12px; padding:18px 22px; display:flex; align-items:baseline; gap:14px;
}
.cifra b { font-size:26px; color:var(--amber); font-weight:700; }
.cifra span { font-size:14px; color:var(--navy-100); }
/* ============ TESTIMONIOS ============ */
.carrusel-zona { display:flex; align-items:center; gap:14px; }
.flecha {
width:42px; height:42px; border-radius:50%; border:1px solid #d8d6cd; background:#fff;
display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
transition:background .2s ease;
}
.flecha:hover { background:var(--gris-perla); }
.flecha svg { width:18px; height:18px; stroke:var(--tinta); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.carrusel {
display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
scrollbar-width:none; flex:1; padding:6px 2px;
}
.carrusel::-webkit-scrollbar { display:none; }
.resena {
min-width:calc(33.34% - 11px); scroll-snap-align:start; border:1px solid #e8e6df;
border-radius:14px; padding:18px; background:#fff; display:flex; flex-direction:column;
}
.resena-cab { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.resena-cab .g-tip { margin-left:auto; align-self:flex-start; }
.avatar {
width:44px; height:44px; border-radius:50%; background:transparent; color:var(--navy-800);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0;
position:relative;
}
.avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.avatar .mini-insignia {
position:absolute; right:-3px; bottom:-3px; width:14px; height:14px; border-radius:50%;
background:#fff; display:flex; align-items:center; justify-content:center;
box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.avatar .mini-insignia svg { width:10px; height:10px; }
.avatar--logo { background:#f4f6f9; }
.avatar--logo img { object-fit:contain; padding:6px; }
.resena-quien { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; }
/* El core de WP genera :where(.is-layout-flow) > * { margin-block-start:24px; }
en global-styles-inline-css (hardcodeado, no vía var(--wp--style--block-gap),
por eso nuestra neutralización global de esa variable no lo alcanzaba). Un
:where() tiene especificidad 0, así que una clase sola ya le gana. */
.resena-quien > * { margin-block-start:0; }
.resena-nombre { font-size:15px; font-weight:700; margin:0; color:#202124; }
.resena-fecha { font-size:13px; margin:0; color:#70757a; }
.g-icono { width:16px; height:16px; flex-shrink:0; display:block; }
.resena .estrellas { color:#FBBC05; font-size:16px; letter-spacing:2px; margin:12px 0 10px; display:flex; align-items:center; gap:6px; }
.check-azul { width:15px; height:15px; flex-shrink:0; }
.resena p { margin:0; }
.resena > p:last-child { font-size:13.5px; line-height:1.55; color:#3c4043; }
/* Tooltip "Publicado en Google" sobre el icono */
.g-tip { position:relative; display:inline-flex; flex-shrink:0; }
.g-tip::after {
content:attr(data-tip); position:absolute; right:calc(100% + 10px); top:50%;
transform:translateY(-50%); background:#111; color:#fff; font-size:12px; font-weight:600;
padding:7px 12px; border-radius:6px; white-space:nowrap; opacity:0; visibility:hidden;
transition:opacity .15s ease; pointer-events:none; z-index:5;
}
.g-tip::before {
content:""; position:absolute; right:calc(100% + 3px); top:50%; transform:translateY(-50%);
border:6px solid transparent; border-left-color:#111; opacity:0; visibility:hidden;
transition:opacity .15s ease; pointer-events:none; z-index:5;
}
.g-tip:hover::after, .g-tip:hover::before, .g-tip:focus-visible::after, .g-tip:focus-visible::before { opacity:1; visibility:visible; }
/* Insignia verificado por Trustindex */
.trust-zona { display:flex; justify-content:flex-end; margin-top:16px; }
.trust-badge {
position:relative; background:#12925C; color:#fff; font-size:12.5px; font-weight:600;
padding:8px 14px; border-radius:5px; cursor:default; display:inline-flex; align-items:center; gap:7px;
}
.trust-badge svg { width:14px; height:14px; stroke:#fff; stroke-width:2; fill:none; }
.trust-tooltip {
position:absolute; bottom:calc(100% + 12px); right:0; width:min(320px, 80vw);
background:#fff; color:#333; border-radius:12px; padding:16px 18px;
box-shadow:0 12px 36px rgba(0,0,0,.22); font-size:13px; font-weight:400; line-height:1.55;
opacity:0; visibility:hidden; transition:opacity .15s ease; text-align:left; z-index:10;
}
.trust-tooltip::after {
content:""; position:absolute; top:100%; right:22px;
border:8px solid transparent; border-top-color:#fff;
}
.trust-tooltip b { display:inline; }
.trust-tooltip a { color:#333; font-weight:600; }
.trust-badge:hover .trust-tooltip, .trust-badge:focus-within .trust-tooltip { opacity:1; visibility:visible; }
@media (max-width:1000px){ .resena { min-width:calc(50% - 8px); } }
@media (max-width:760px){ .resena { min-width:100%; } }
/* ============ BANDA DE CONFIANZA ============ */
.banda {
background:linear-gradient(155deg, var(--navy-950) 0%, #08386A 60%, var(--navy-800) 100%);
text-align:center; padding:72px 6vw;
}
.banda blockquote {
font-size:clamp(20px,2.6vw,27px); font-style:italic; color:#fff; line-height:1.5;
max-width:680px; margin:0 auto 30px; font-weight:400;
}
.banda blockquote strong { color:var(--amber); font-weight:700; }
.banda .btn-p { display:inline-block; }
/* ============ CASOS DE ÉXITO ============ */
/* Track topado a 320px (a juego con el max-width de la tarjeta) en vez de 1fr:
así, cuando hay pocos casos, sobra espacio real en la fila y justify-content
puede centrarlos. Con 1fr los tracks siempre llenan el 100% del ancho y no
queda hueco que centrar. auto-fit colapsa las columnas vacías (necesario para
que ese hueco exista); antes se usaba auto-fill, pero eso solo tenía sentido
mientras el ancho de la tarjeta dependía del track — ahora lo topa ella misma. */
.casos-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,320px)); justify-content:center; gap:24px; }
/* Zona del carrusel móvil: en escritorio es un wrapper transparente con las
flechas ocultas (la cuadrícula de arriba manda). Reutiliza el mismo mecanismo
de .carrusel-zona/.mas-casos-zona: gd.js ya las recorre genéricamente. */
.casos-grid-zona .flecha { display:none; }
@media (max-width:768px){
.casos-grid-zona { display:flex; align-items:center; gap:14px; }
.casos-grid-zona .flecha { display:flex; }
/* Escopado a ".casos-grid-zona .casos-grid" (no ".casos-grid" a secas):
el listado del archivo (/casos-de-exito/) usa la misma clase base
".casos-grid" pero sin la zona/flechas del carrusel de la home — con el
selector sin escopar, este bloque también lo convertía en fila
deslizable, pero sin ningún control para navegarla. */
.casos-grid-zona .casos-grid {
display:flex; grid-template-columns:none; justify-content:flex-start; gap:24px;
overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; flex:1;
padding-block:6px; /* las flechas ya son hermanas fuera de .casos-grid dentro de .casos-grid-zona, no hace falta reservarles hueco aquí */
}
.casos-grid-zona .casos-grid::-webkit-scrollbar { display:none; }
/* min-width:0 anula el mínimo automático que todo flex item tiene por defecto
(calculado a partir de su contenido más ancho); sin esto, flex:0 0 100% se
ignora y la tarjeta se estira para acomodar el texto en vez de partirlo. */
.casos-grid-zona .casos-grid .caso-portada { width:100%; max-width:none; flex:0 0 100%; min-width:0; scroll-snap-align:start; padding:20px; }
.casos-grid-zona .casos-grid .caso-portada h3 { min-width:0; }
}
.caso-portada {
min-height:420px; max-width:320px; border-radius:16px; overflow:hidden; position:relative;
background:linear-gradient(155deg, var(--navy-950), var(--navy-800) 70%, var(--navy-600));
display:flex; flex-direction:column; justify-content:flex-end; padding:28px;
text-decoration:none; transition:transform .25s ease;
}
.caso-portada:hover { transform:translateY(-5px); }
.caso-portada h3 { color:#fff; font-size:20px; line-height:1.3; margin-bottom:10px; overflow-wrap:anywhere; }
.caso-portada h3 em { color:var(--amber); font-style:normal; }
.caso-portada small { color:var(--navy-200); font-size:12px; }
.caso-link {
margin-top:24px; align-self:flex-start; border:1px solid rgba(255,255,255,.5); color:#fff;
padding:10px 18px; border-radius:8px; font-size:13.5px; font-weight:600; transition:background .2s ease;
}
.caso-portada:hover .caso-link { background:rgba(255,255,255,.14); }
.casos-mas { text-align:center; margin-top:40px; }
.btn-borde {
display:inline-block; border:1.5px solid var(--navy-800); color:var(--navy-800);
padding:13px 26px; border-radius:8px; font-size:15px; font-weight:600; text-decoration:none;
transition:background .2s ease, color .2s ease;
}
.btn-borde:hover { background:var(--navy-800); color:#fff; }
/* ============ CONTACTO ============ */
.contacto-grid { display:flex; gap:48px; align-items:center; }
.contacto-texto { flex:1; }
.contacto-texto h2 { font-size:clamp(24px,3vw,32px); font-weight:700; margin-bottom:14px; }
.contacto-texto h2 em { color:var(--amber); font-style:normal; }
.contacto-texto p { font-size:15.5px; color:var(--navy-100); line-height:1.7; margin-bottom:22px; }
.whatsapp {
display:inline-flex; align-items:center; gap:12px; background:rgba(255,255,255,.06);
border:1px solid rgba(133,183,235,.25); border-radius:12px; padding:14px 20px; text-decoration:none;
}
.whatsapp svg { width:22px; height:22px; fill:var(--amber); }
.whatsapp small { display:block; font-size:11px; color:var(--navy-200); letter-spacing:1px; }
.whatsapp b { font-size:16px; color:#fff; }
.form-caja { flex:1.1; background:rgba(255,255,255,.05); border:1px solid rgba(133,183,235,.25); border-radius:16px; padding:26px; }
.form-caja h3 { color:#fff; font-size:18px; margin-bottom:4px; }
.form-caja > p { font-size:13px; color:var(--navy-200); margin-bottom:16px; }
.form-fila { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.campo { display:flex; flex-direction:column; gap:5px; }
.campo label { font-size:12.5px; color:var(--navy-100); }
.campo input, .campo textarea {
background:rgba(255,255,255,.08); border:1px solid rgba(133,183,235,.3); border-radius:8px;
padding:10px 12px; color:#fff; font-size:16px; font-family:inherit; /* <16px dispara el zoom automático de iOS Safari al enfocar */
}
.campo input:focus, .campo textarea:focus { outline:2px solid var(--amber); border-color:transparent; }
.campo textarea { min-height:88px; resize:vertical; }
.form-caja .btn-p { border:none; cursor:pointer; margin-top:14px; width:100%; text-align:center; font-family:inherit; }
/* Spinner dentro del botón mientras envía */
.btn-p.enviando {
position: relative;
color: transparent; /* oculta el texto sin cambiar el ancho */
pointer-events: none; /* evita doble envío */
}
.btn-p.enviando::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 18px; height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid rgba(255,255,255,.35);
border-top-color: #fff;
border-radius: 50%;
animation: gd-girar .6s linear infinite;
}
@keyframes gd-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.btn-p.enviando::after { animation-duration: 2s; }
}
/* ============ FAQ ============ */
.faq-lista { max-width:720px; margin:0 auto; }
.faq-item { border-bottom:1px solid #e8e6df; }
.faq-item summary {
display:flex; align-items:center; gap:14px; padding:18px 4px; cursor:pointer;
font-size:16px; font-weight:600; list-style:none;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-pin { flex-shrink:0; width:20px; height:20px; }
.faq-pin path { fill:var(--amber-700); }
.faq-pin circle { fill:#fff; }
.faq-flecha { margin-left:auto; flex-shrink:0; width:16px; height:16px; stroke:#999; stroke-width:2; fill:none; stroke-linecap:round; transition:transform .25s ease; }
.faq-item[open] .faq-flecha { transform:rotate(180deg); }
.faq-item p { padding:0 4px 18px 38px; font-size:14.5px; color:var(--tinta-sec); line-height:1.65; }
/* ============ FOOTER ============ */
.footer { background:var(--navy-950); color:var(--navy-100); padding:56px 6vw 0; }
.footer-grid { max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:36px; padding-bottom:36px; }
.footer .logo { margin-bottom:10px; }
.footer-desc { font-size:13.5px; color:var(--navy-200); line-height:1.6; margin-bottom:14px; max-width:280px; }
.footer-nap { font-size:13.5px; line-height:1.9; }
.footer h4 { font-size:12px; color:var(--amber); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:12px; }
.footer ul { list-style:none; }
.footer ul a { color:var(--navy-100); text-decoration:none; font-size:13.5px; line-height:2.1; }
.footer ul a:hover { color:#fff; }
.footer-bar {
max-width:1080px; margin:0 auto; border-top:1px solid rgba(133,183,235,.2);
padding:16px 0; text-align:center;
font-size:12.5px; color:var(--navy-200);
}
/* ============ RESPONSIVE ============ */
@media (max-width:820px){
/* Menú móvil: enlaces en desplegable, CTA siempre visible junto a la hamburguesa */
.hamburguesa { display:flex; }
.header { gap:12px; }
.btn-cta { font-size:13px; padding:9px 13px; }
.nav {
position:absolute; top:100%; left:0; right:0; background:var(--navy-950);
flex-direction:column; align-items:stretch; gap:0; padding:8px 6vw 18px;
display:none; border-top:1px solid rgba(133,183,235,.15);
}
.header.abierto .nav { display:flex; }
.nav a { padding:13px 4px; font-size:16px; border-bottom:1px solid rgba(133,183,235,.1); }
.nav a:last-child { border-bottom:none; }
/* Hero apilado */
.hero { padding:48px 6vw 110px; }
.hero-inner { flex-direction:column; text-align:center; gap:44px; }
.parrafo-hero { margin-inline:auto; }
.botones { justify-content:center; }
.botones a { flex:1 1 100%; text-align:center; padding:15px 24px; }
.ficha { width:min(280px, 78vw); }
.ficha-foto { height:320px; }
.ficha-cuerpo { text-align:left; }
.radar { width:max(150vw, 560px); height:max(150vw, 560px); }
/* Píldora */
.zona-pildora { height:85px; }
.pildora { padding:16px 22px; width:90vw; }
.pildora-texto { font-size:13px; }
/* Secciones */
.seccion { padding:60px 6vw; }
.sobre-grid, .contacto-grid { flex-direction:column; text-align:center; gap:36px; }
.kicker-sec { text-align:center; }
.sobre-texto p, .contacto-texto p { text-align:center; }
.cifra { text-align:left; justify-content:flex-start; }
.cifras, .form-caja { width:100%; }
.form-fila { grid-template-columns:1fr; }
.flecha { width:36px; height:36px; }
.carrusel-zona { gap:8px; }
.trust-zona { justify-content:center; }
.footer-grid { grid-template-columns:1fr; gap:28px; }
}
@media (prefers-reduced-motion:reduce){
.cinta-inner, .abierto::before, .anillo.pulso { animation:none; }
.anillo.pulso.p1 { opacity:.35; }
.anillo.pulso.p2 { opacity:.18; transform:scale(1.35); }
html { scroll-behavior:auto; }
}
/* ============ PLANTILLA CASOS: LISTADO ============ */
.hero-listado {
background:linear-gradient(155deg, var(--navy-950) 0%, #08386A 60%, var(--navy-800) 100%);
text-align:center; padding:64px 6vw 56px;
}
.hero-listado h1 { font-size:clamp(28px,3.6vw,40px); font-weight:700; color:#fff; margin-bottom:12px; }
.hero-listado h1 em { color:var(--amber); font-style:normal; }
.hero-listado p { font-size:16px; color:var(--navy-100); max-width:560px; margin:0 auto; line-height:1.65; }
/* ============ PLANTILLA CASOS: INDIVIDUAL ============ */
.hero-caso {
background:linear-gradient(155deg, var(--navy-950) 0%, #08386A 60%, var(--navy-800) 100%);
padding:48px 6vw 56px;
}
.hero-caso-inner { max-width:820px; margin:0 auto; }
.migas { font-size:13px; color:var(--navy-200); margin-bottom:22px; }
.migas a { color:var(--navy-200); text-decoration:none; }
.migas a:hover { color:#fff; }
.hero-caso h1 { font-size:clamp(26px,3.4vw,38px); font-weight:700; color:#fff; line-height:1.25; margin:10px 0 20px; }
.hero-caso h1 em { color:var(--amber); font-style:normal; }
.chips { display:flex; gap:10px; flex-wrap:wrap; }
.chip {
background:rgba(255,255,255,.08); border:1px solid rgba(133,183,235,.3);
color:var(--navy-50); font-size:13px; padding:7px 14px; border-radius:16px;
}
.chip b { color:var(--amber); font-weight:600; }
.resultados-clave { background:#fff; padding:0 6vw; }
.resultados-inner {
max-width:820px; margin:-34px auto 0; position:relative; z-index:2;
background:var(--gris-perla); border:1px solid #e4e2db; border-radius:16px;
display:grid; grid-template-columns:repeat(3,1fr); gap:1px; overflow:hidden;
box-shadow:0 8px 28px rgba(4,44,83,.12);
}
.resultado-kpi { background:var(--gris-perla); text-align:center; padding:22px 12px; }
.resultado-kpi b { display:block; font-size:26px; color:var(--amber-700); font-weight:700; }
.resultado-kpi span { font-size:13px; color:var(--tinta-sec); }
.cuerpo-caso { max-width:720px; margin:0 auto; padding:64px 6vw; }
.cuerpo-caso h2 { font-size:23px; font-weight:700; margin:40px 0 14px; display:flex; align-items:center; gap:12px; }
.cuerpo-caso h2:first-child { margin-top:0; }
.num-paso {
width:30px; height:30px; border-radius:50%; background:var(--navy-50); color:var(--navy-800);
display:inline-flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;
}
.cuerpo-caso p { font-size:15.5px; color:var(--tinta-sec); line-height:1.75; margin-bottom:14px; }
.cuerpo-caso ul { margin:0 0 14px 4px; list-style:none; }
.cuerpo-caso li {
font-size:15.5px; color:var(--tinta-sec); line-height:1.7; padding-left:26px; position:relative; margin-bottom:8px;
}
.cuerpo-caso li::before {
content:""; position:absolute; left:0; top:7px; width:14px; height:14px;
background:url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.captura {
background:var(--gris-perla); border:1px dashed #cfcdc4; border-radius:12px;
padding:40px 20px; text-align:center; color:#8a887f; font-size:14px; margin:20px 0;
}
.testimonio-caso {
background:var(--gris-perla); border-left:4px solid var(--amber); border-radius:0 12px 12px 0;
padding:22px 24px; margin:36px 0; font-style:italic; font-size:16px; line-height:1.65; color:var(--tinta);
}
.testimonio-caso footer { font-style:normal; font-size:13.5px; color:var(--tinta-sec); margin-top:10px; font-weight:600; }
.cta-caso {
background:linear-gradient(155deg, var(--navy-950) 0%, #08386A 60%, var(--navy-800) 100%);
text-align:center; padding:64px 6vw;
}
.cta-caso h2 { font-size:clamp(22px,2.8vw,30px); color:#fff; font-weight:700; margin-bottom:10px; }
.cta-caso h2 em { color:var(--amber); font-style:normal; }
.cta-caso p { color:var(--navy-100); font-size:15.5px; margin-bottom:24px; }
.mas-casos { padding:64px 6vw; }
.mas-casos-zona { max-width:860px; margin:0 auto; display:flex; align-items:center; gap:14px; }
.casos-carrusel {
display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
scrollbar-width:none; flex:1; padding:6px 2px;
}
.casos-carrusel::-webkit-scrollbar { display:none; }
.casos-carrusel .caso-portada { min-width:calc(50% - 12px); scroll-snap-align:start; }
@media (max-width:640px){ .casos-carrusel .caso-portada { min-width:100%; } }
.divisor-demo { background:#111; color:#fff; text-align:center; padding:14px; font-size:14px; letter-spacing:1px; }
@media (max-width:820px){
.resultados-inner { grid-template-columns:1fr; }
.chips { justify-content:center; }
.hero-caso { text-align:center; }
.migas { text-align:left; }
}
/* ============ CASO INDIVIDUAL v2 ============ */
.hero-caso2 {
background:
radial-gradient(ellipse 620px 520px at 74% 50%, rgba(55,138,221,.28), transparent 65%),
linear-gradient(155deg, var(--navy-950) 0%, #08386A 42%, var(--navy-800) 78%, #0E4C8A 100%);
position:relative; overflow:hidden; padding:60px 6vw 110px;
}
.hero-caso2-inner { position:relative; z-index:1; max-width:1080px; margin:0 auto; }
.volver { display:inline-block; font-size:13.5px; color:var(--navy-200); text-decoration:none; margin-bottom:26px; }
.volver:hover { color:#fff; }
.hero-caso2-cols { display:flex; gap:48px; align-items:center; }
.hero-caso2-texto { flex:1; }
.hero-caso2 h1 { font-size:clamp(26px,3.4vw,38px); font-weight:700; color:#fff; line-height:1.28; margin:10px 0 22px; }
.hero-caso2 h1 em { color:var(--amber); font-style:normal; }
.chips { display:flex; gap:10px; flex-wrap:wrap; }
.chip {
background:rgba(255,255,255,.08); border:1px solid rgba(133,183,235,.3);
color:var(--navy-50); font-size:13px; padding:7px 14px; border-radius:16px;
}
.chip b { color:var(--amber); font-weight:600; }
/* Dúo de dispositivos con radar detrás */
.dispositivos { position:relative; flex:1.15; display:flex; justify-content:center; }
.dispositivos .radar { z-index:-1; }
.portatil {
width:min(560px,100%); position:relative; z-index:1;
--wp--style--block-gap:0; /* anula el gap de 2em que WP inyecta por defecto entre hijos de un Group */
}
.portatil-pantalla {
aspect-ratio:16/10; background:#fff; border-radius:12px 12px 0 0; border:6px solid #0a2540; border-bottom:none;
display:flex; align-items:center; justify-content:center; color:#8a887f; font-size:13px; text-align:center; overflow:hidden;
position:relative; z-index:1; margin-bottom:-6px; /* solapa el cuello: su propio borde lo tapa ligeramente */
}
/* Cuello que conecta visualmente la pantalla con la base (detrás de la pantalla en z-index) */
.portatil-cuello {
width:14%; height:16px; margin:0 auto;
background:linear-gradient(180deg, #aebccd, #8fa1b5);
position:relative; z-index:0;
}
.portatil-base {
height:14px; width:calc(100% + 50px); margin-left:-25px; margin-top:0;
background:linear-gradient(180deg, #dbe3ec, #aebccd); border-radius:0 0 10px 10px;
position:relative; box-shadow:0 12px 22px rgba(0,0,0,.35);
}
.portatil-base::after { content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:70px; height:5px; background:#93a4b8; border-radius:0 0 6px 6px; }
.movil {
position:absolute; left:-5%; bottom:-20px; width:128px; z-index:2;
background:#0a2540; border-radius:14px; padding:5px; box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.movil-pantalla {
aspect-ratio:9/19; background:#fff; border-radius:10px;
display:flex; align-items:center; justify-content:center; color:#8a887f; font-size:10px; text-align:center; overflow:hidden;
}
/* KPIs puente */
.kpis-zona { background:#fff; padding:0 6vw; position:relative; display:flow-root; }
.kpis-grid {
max-width:900px; margin:-47px auto 0; position:relative; z-index:2;
display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
/* WP core (wp-block-library) fuerza margin-block-start:0 en los hijos de un Group
con layout "flow" — dos clases de especificidad, más que .kpis-grid sola.
Repetimos las clases para ganarle y que el margen negativo no se anule. */
.wp-block-group.kpis-zona > .wp-block-group.kpis-grid { margin-top:-47px; }
.kpi {
background:var(--gris-perla); border:1px solid #e4e2db; border-radius:16px;
padding:22px; box-shadow:0 8px 28px rgba(4,44,83,.12); display:flex; gap:14px; align-items:center;
}
.kpi-icono {
width:46px; height:46px; border-radius:12px; background:var(--navy-50); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
}
.kpi-icono svg { width:23px; height:23px; stroke:var(--navy-800); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.kpi b { display:block; font-size:24px; color:var(--tinta); font-weight:700; line-height:1.1; }
.kpi b em { color:var(--amber-700); font-style:normal; }
.kpi span { font-size:12.5px; color:var(--tinta-sec); line-height:1.4; display:block; margin-top:3px; }
/* El problema */
.problema { padding:72px 6vw 80px; }
.problema-inner { max-width:1080px; margin:0 auto; display:flex; gap:48px; align-items:center; }
.problema-texto { flex:1; }
.problema-texto h2 { font-size:clamp(22px,2.8vw,30px); font-weight:700; line-height:1.3; margin:8px 0 14px; }
.problema-texto p { font-size:15.5px; color:var(--tinta-sec); line-height:1.7; }
.kicker-claro { font-size:13px; color:var(--amber-700); font-weight:600; letter-spacing:1.5px; text-transform:uppercase; }
.problema-lista {
flex:1.1; background:var(--gris-perla); border:1px solid #e4e2db; border-radius:16px; padding:26px 28px;
list-style:none;
}
.problema-lista li {
font-size:14.5px; color:var(--tinta); line-height:1.55; padding:11px 0 11px 32px; position:relative;
border-bottom:1px solid #e4e2db;
}
.problema-lista li:last-child { border-bottom:none; }
.problema-lista li::before {
content:""; position:absolute; left:0; top:14px; width:17px; height:17px;
background:url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
/* La estrategia (timeline sobre navy) */
.estrategia {
background:linear-gradient(155deg, var(--navy-950) 0%, #08386A 60%, var(--navy-800) 100%);
padding:76px 6vw;
}
.estrategia-inner { max-width:1080px; margin:0 auto; }
.estrategia h2 { font-size:clamp(22px,2.8vw,30px); font-weight:700; color:#fff; margin:8px 0 40px; }
.pasos-fila { display:grid; grid-template-columns:repeat(4,1fr); gap:28px 20px; position:relative; }
.paso { text-align:center; position:relative; }
.paso-circulo {
width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.08);
border:1px solid rgba(133,183,235,.35); margin:0 auto 12px; position:relative; z-index:1;
display:flex; align-items:center; justify-content:center;
}
.paso-circulo svg { width:22px; height:22px; stroke:var(--amber); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.paso-num { font-size:11.5px; color:var(--amber); font-weight:700; letter-spacing:1px; display:block; margin-bottom:4px; }
.paso h3 { font-size:15px; color:#fff; font-weight:600; margin-bottom:5px; }
.paso p { font-size:12.5px; color:var(--navy-100); line-height:1.5; }
/* conectores discontinuos entre pasos: cada círculo enlaza con el siguiente */
.paso::after {
content:""; position:absolute; top:25px; left:calc(50% + 36px); right:calc(-50% + 36px);
border-top:2px dashed rgba(133,183,235,.35);
}
.paso:nth-child(4n)::after { display:none; } /* último de cada fila en escritorio */
/* El resultado + galería */
.resultado-lista {
flex:1.1; background:var(--gris-perla); border:1px solid #e4e2db; border-radius:16px; padding:26px 28px;
list-style:none;
}
.resultado-lista li {
font-size:14.5px; color:var(--tinta); line-height:1.55; padding:11px 0 11px 32px; position:relative;
border-bottom:1px solid #e4e2db;
}
.resultado-lista li:last-child { border-bottom:none; }
.resultado-lista li::before {
content:""; position:absolute; left:0; top:14px; width:17px; height:17px;
background:url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.resultado-intro { max-width:1080px; margin:0 auto 44px; display:flex; gap:48px; align-items:center; }
.resultado-intro .problema-texto { flex:1; }
/* Mismo motivo que en .kpis-grid: el core de WP fuerza margin-block-end:0 en los
hijos de un Group con layout "flow" y se comería el espacio antes de la galería. */
.wp-block-group.galeria-inner > .wp-block-group.resultado-intro { margin-bottom:44px; }
/* Galería de resultados */
.galeria { padding:72px 6vw; }
.galeria-inner { max-width:1080px; margin:0 auto; }
.galeria h2 { font-size:clamp(22px,2.8vw,30px); font-weight:700; margin:8px 0 26px; }
.captura-card { cursor:zoom-in; }
.captura-marco {
aspect-ratio:16/10; background:var(--gris-perla); border:1px dashed #cfcdc4; border-radius:14px;
display:flex; align-items:center; justify-content:center; color:#8a887f; font-size:14px; text-align:center; padding:16px;
transition:transform .2s ease, box-shadow .2s ease; overflow:hidden;
}
.captura-card:hover .captura-marco { transform:translateY(-4px); box-shadow:0 12px 30px rgba(4,44,83,.14); }
.captura-card figcaption { font-size:13.5px; color:var(--tinta-sec); text-align:center; margin-top:10px; font-weight:600; }
/* Lightbox de la galería */
.lightbox {
position:fixed; inset:0; background:rgba(4,44,83,.9); z-index:100;
display:none; align-items:center; justify-content:center; padding:5vw; cursor:zoom-out;
}
.lightbox.activo { display:flex; }
.lightbox-contenido { max-width:min(960px,92vw); width:100%; text-align:center; }
.lightbox-contenido .captura-marco {
aspect-ratio:16/10; background:#fff; border:none; font-size:16px; cursor:default;
box-shadow:0 24px 70px rgba(0,0,0,.4);
}
.lightbox-contenido figcaption { color:#fff; font-size:15px; margin-top:16px; font-weight:600; }
.lightbox-cerrar {
position:absolute; top:22px; right:26px; background:none; border:none; color:#fff;
font-size:34px; cursor:pointer; line-height:1; padding:6px;
}
/* Banda CTA del caso */
.cta-banda {
background:linear-gradient(155deg, var(--navy-950) 0%, #08386A 60%, var(--navy-800) 100%);
padding:52px 6vw;
}
.cta-banda-inner {
max-width:1080px; margin:0 auto; display:flex; gap:32px; align-items:center; justify-content:space-between;
}
.cta-banda-izq { display:flex; gap:20px; align-items:center; }
.cta-icono {
width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.08);
border:1px solid rgba(133,183,235,.35); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
}
.cta-icono svg { width:26px; height:26px; stroke:var(--amber); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cta-banda h2 { font-size:clamp(19px,2.3vw,25px); color:#fff; font-weight:700; margin-bottom:6px; }
.cta-banda p { font-size:14.5px; color:var(--navy-100); line-height:1.55; max-width:440px; }
.cta-banda-der { text-align:center; flex-shrink:0; }
.mas-casos { padding:64px 6vw; }
.mas-casos-zona { max-width:860px; margin:0 auto; display:flex; align-items:center; gap:14px; }
.casos-carrusel {
display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
scrollbar-width:none; flex:1; padding:6px 2px;
}
.casos-carrusel::-webkit-scrollbar { display:none; }
.casos-carrusel .caso-portada { min-width:calc(50% - 12px); scroll-snap-align:start; }
@media (max-width:640px){ .casos-carrusel .caso-portada { min-width:100%; } }
@media (max-width:920px){
.pasos-fila { grid-template-columns:repeat(2,1fr); }
.paso:nth-child(4n)::after { display:block; }
.paso:nth-child(2n)::after { display:none; } /* último de cada pareja */
}
@media (max-width:820px){
.hero-caso2 { text-align:center; padding-bottom:120px; }
.hero-caso2-cols { flex-direction:column; gap:52px; }
.chips { justify-content:center; }
.volver { display:block; text-align:left; }
.dispositivos { width:100%; }
.portatil { width:min(430px, 94%); }
.kpis-grid { grid-template-columns:1fr; max-width:420px; }
.problema-inner, .resultado-intro { flex-direction:column; text-align:center; }
.resultado-lista { text-align:left; width:100%; }
.problema-lista { text-align:left; width:100%; }
.estrategia { text-align:center; }
.cta-banda-inner { flex-direction:column; text-align:center; }
.cta-banda-izq { flex-direction:column; }
.movil { left:-2%; }
}
@media (max-width:768px){
/* Móvil del mockup en torno a un cuarto del ancho del portátil: punto intermedio
entre el tamaño original (tapaba media pantalla) y el reducido a la mitad
(demasiado pequeño). La proporción la sigue marcando el aspect-ratio de
.movil-pantalla, así que solo hace falta tocar el ancho. */
.movil { width:90px; left:-3%; bottom:-14px; }
}
@media (max-width:560px){
.pasos-fila { grid-template-columns:1fr; max-width:280px; margin:0 auto; }
.paso::after, .paso:nth-child(2n)::after {
display:block; top:auto; left:50%; right:auto; bottom:-30px; height:30px; width:0;
border-top:none; border-left:2px dashed rgba(133,183,235,.35); transform:translateX(-50%);
}
.paso:last-child::after { display:none; }
}
/* Parrilla del listado: 3 / 2 / 1 columnas */
.listado-grid { grid-template-columns:repeat(3,1fr); }
@media (max-width:920px){ .listado-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .listado-grid { grid-template-columns:1fr; } }
/* ============ PLANTILLA LEGAL ============ */
.hero-legal {
background:linear-gradient(155deg, var(--navy-950) 0%, #08386A 60%, var(--navy-800) 100%);
padding:52px 6vw 56px; text-align:center;
}
.hero-legal h1 { font-size:clamp(26px,3.2vw,36px); font-weight:700; color:#fff; margin-bottom:8px; }
.hero-legal p { font-size:14px; color:var(--navy-200); }
.legal-cuerpo { max-width:1080px; margin:0 auto; padding:56px 6vw 72px; }
.legal-cuerpo h2 { font-size:21px; font-weight:700; margin:36px 0 12px; }
.legal-cuerpo h2:first-child { margin-top:0; }
.legal-cuerpo h3 { font-size:17px; font-weight:600; margin:24px 0 10px; }
.legal-cuerpo p { font-size:15px; color:var(--tinta-sec); line-height:1.75; margin-bottom:14px; }
.legal-cuerpo ul { margin:0 0 14px 22px; }
.legal-cuerpo li { font-size:15px; color:var(--tinta-sec); line-height:1.7; margin-bottom:6px; }
.legal-cuerpo a { color:var(--navy-800); font-weight:600; }
.legal-cuerpo a:hover { text-decoration-color:var(--amber-700); }
.legal-cuerpo strong { color:var(--tinta); }
/* ============================================================
ADAPTACIONES A WORDPRESS
Reglas que traducen el marcado de los bloques nativos
al sistema de diseño validado en los mockups.
============================================================ */
/* El wrapper de la parte de plantilla no debe limitar el sticky del header:
WordPress envuelve el header en un div.wp-block-template-part que solo lo
contiene a él, así que el sticky no tiene recorrido donde pegarse. */
.wp-site-blocks > .wp-block-template-part:first-child {
display: contents;
}
/* Anula en origen el gap automático (2em) que WordPress inyecta entre los
hijos de cualquier Group con layout "flow"/"constrained". Es la causa raíz
de la fila de bugs "margin:0 auto pisado" que fuimos parcheando uno a uno
(FAQ, KPIs, problema, pasos, legal...): al venir de una custom property
heredada, esto la neutraliza para todo el árbol sin pelear con
especificidad, y hace innecesaria la regla ".wp-block-group:not(...)"
que existía solo para eso — ya no hace falta mantenerla ni ampliarla
cada vez que aparece un contenedor nuevo con margen propio. */
.wp-site-blocks { --wp--style--block-gap: 0; }
/* Variante "hardcodeada" del mismo mecanismo: WordPress también genera
:where(.is-layout-flow) > * { margin-block-start: 24px; } y
:where(.is-layout-flow) > :first-child { margin-block-start: 0; } en
global-styles-inline-css (activado por appearanceTools:true en theme.json,
sin valor propio de spacing.blockGap). Al ser un px fijo, no una var(),
--wp--style--block-gap:0 no lo anula — hace falta pisarlo aparte. En un
grid con align-items:stretch (el default, sin overridear en ningún grid
de este tema) esto descuadra las tarjetas: la primera (sin margen, por la
regla :first-child) ocupa toda su celda desde arriba; las demás quedan con
su contenido empujado 24px hacia abajo dentro de una celda de igual
altura — de ahí el "primera tarjeta distinta a las demás".
Es el mismo bug que ya vimos en .resena-quien (cabecera de las reseñas),
aplicado aquí a todos los grids de tarjetas conocidos del tema. Si aparece
un grid de tarjetas nuevo con este mismo síntoma, añade aquí su clase en
vez de rediagnosticar el bug desde cero. */
.servicios-grid > *, .kpis-grid > *, .casos-grid > *, .pasos-fila > * {
margin-block-start: 0;
}
/* Resets de bloques */
figure { margin:0; }
.wp-block-image img { height:auto; max-width:100%; }
:where(.wp-block-details) { margin-bottom:0; }
/* Header fijo compatible con la barra de administración */
.admin-bar .header { top:32px; }
@media screen and (max-width:782px){ .admin-bar .header { top:46px; } }
@media screen and (max-width:600px){ .admin-bar .header { top:0; } } /* la admin bar deja de ser fija */
/* Botones de bloque → estilos de la casa */
.botones .wp-block-button__link,
.banda .wp-block-button__link,
.cta-banda-der .wp-block-button__link {
background:var(--amber); color:var(--amber-900); padding:13px 24px; border-radius:8px;
font-weight:600; font-size:15px; text-decoration:none;
transition:background .2s ease, transform .2s ease;
}
.botones .wp-block-button__link:hover,
.banda .wp-block-button__link:hover,
.cta-banda-der .wp-block-button__link:hover { background:#FBD494; transform:translateY(-1px); }
.casos-mas .wp-block-button__link {
display:inline-block; border:1.5px solid var(--navy-800); color:var(--navy-800); background:none;
padding:13px 26px; border-radius:8px; font-size:15px; font-weight:600; text-decoration:none;
transition:background .2s ease, color .2s ease;
}
.casos-mas .wp-block-button__link:hover { background:var(--navy-800); color:#fff; }
.wp-block-buttons { gap:12px; }
/* Ficha del hero (imagen destacada como bloque) */
.ficha-foto .wp-block-image, .ficha-foto figure { position:absolute; inset:0; }
.ficha-foto img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Cinta de logos: bloques de imagen dentro de la cinta */
.cinta-inner { will-change:transform; }
.cinta-inner .wp-block-image { flex:0 0 auto; }
.cinta-inner img { height:48px; width:auto; filter:none; opacity:1; }
/* Avatares de reseñas como bloque de imagen */
.avatar .wp-block-image, .avatar figure { position:absolute; inset:0; }
.avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
/* FAQ con el bloque nativo details: pin ámbar + flecha vía CSS */
.faq-item > summary {
display:flex; align-items:center; gap:14px; padding:18px 4px 18px 34px; cursor:pointer;
font-size:16px; font-weight:600; list-style:none; position:relative;
}
.faq-item > summary::-webkit-details-marker { display:none; }
.faq-item > summary::before {
content:""; position:absolute; left:4px; width:20px; height:20px;
background:url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.faq-item > summary::after {
content:""; margin-left:auto; width:16px; height:16px; flex-shrink:0; transition:transform .25s ease;
background:url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.faq-item[open] > summary::after { transform:rotate(180deg); }
.faq-item > :not(summary) { padding:0 4px 18px 38px; font-size:14.5px; color:var(--tinta-sec); line-height:1.65; }
/* Galería del caso (bloque nativo de galería con clase galeria-fila), reconstruida
desde cero con Grid en vez de Flex: por defecto (align/justify-items:stretch)
cualquier hijo directo —una imagen suelta o una sub-galería que el editor haya
anidado por error— se estira para llenar su celda en ambos ejes, sin que
tengamos que acertar qué elemento exacto es. Las reglas del ![]()
son
descendientes puros (".galeria-fila img"), sin exigir figure.wp-block-image
ni una clase de tamaño concreta, así que da igual cómo anide el editor cada
imagen o si es size-large o size-full. */
.galeria-fila { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.galeria-fila > * { margin:0; cursor:zoom-in; } /* el hijo directo, sea imagen o wrapper anidado */
/* El figure es el contenedor flex-columna real de las dos filas (imagen,
pie). La imagen es flex:0 0 auto con height fija, así no se estira ni
encoge. El figcaption anula TODAS sus propiedades de posición y tamaño
(no solo position) porque el core de WP las fija todas para expandirlo
sobre la celda entera — anular solo una dejaba las demás activas. */
.galeria-fila figure.wp-block-image {
display:flex !important; flex-direction:column !important; background:none !important; margin:0 !important;
}
.galeria-fila figure.wp-block-image img {
position:static !important; width:100% !important; height:240px !important;
object-fit:cover !important; border-radius:16px !important; flex:0 0 auto !important;
transition:transform .2s ease, box-shadow .2s ease;
}
.galeria-fila figure.wp-block-image img:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(4,44,83,.14); }
.galeria-fila figure.wp-block-image figcaption {
position:static !important; inset:auto !important; top:auto !important; bottom:auto !important;
left:auto !important; right:auto !important; width:auto !important; height:auto !important;
max-height:none !important; min-height:0 !important; background:none !important; padding:0 !important;
margin:8px 0 0 !important; color:var(--tinta) !important; text-align:center !important; transform:none !important;
font-size:12.5px; font-weight:600;
}
@media (max-width:768px){
.galeria-fila { display:grid !important; grid-template-columns:1fr !important; }
.galeria-fila figure.wp-block-image { width:100% !important; }
.galeria-fila figure.wp-block-image img { width:100% !important; height:200px !important; }
}
/* Aviso del formulario tras el envío */
.form-aviso { display:none; border-radius:8px; padding:11px 14px; font-size:14px; margin-bottom:12px; }
.form-aviso.ok { display:block; background:rgba(26,127,55,.18); border:1px solid rgba(26,127,55,.4); color:#c9f0d6; }
.form-aviso.error { display:block; background:rgba(194,84,84,.15); border:1px solid rgba(194,84,84,.4); color:#f3cfcf; }
/* Título de entrada en heros de plantilla */
.hero-caso2 .wp-block-post-title, .hero-legal .wp-block-post-title { color:#fff; }
.portatil-pantalla img, .movil-pantalla img { width:100%; height:100%; object-fit:cover; object-position:top; }
.portatil-pantalla, .movil-pantalla { position:relative; }
/* ---- Ajustes finales de patrones ---- */
.seccion-servicios { padding-top:36px; }
.banda .wp-block-quote { border:none; margin:0 auto 30px; padding:0; }
.banda .wp-block-quote p { font-size:clamp(20px,2.6vw,27px); font-style:italic; color:#fff; line-height:1.5; max-width:680px; margin:0 auto; }
.banda .wp-block-quote strong { color:var(--amber); font-weight:700; }
.hero-listado-v2 { padding:64px 6vw 72px; }
.listado-centrado { text-align:center; }
.listado-titulo { font-size:clamp(28px,3.6vw,40px); font-weight:700; color:#fff; line-height:1.25; margin:10px auto 16px; max-width:640px; }
/* El layout "constrained" que WP asigna por defecto a los Group (activado por
layout.contentSize/wideSize en theme.json) compite por el margin-left/right
del hijo; reforzamos con más especificidad y sin abreviar el margin. */
.hero-caso2-inner.listado-centrado > h1.wp-block-heading.listado-titulo {
margin-left:auto; margin-right:auto;
}
.listado-titulo em { color:var(--amber); font-style:normal; }
.listado-sub { font-size:16px; color:var(--navy-100); max-width:560px; margin:0 auto; line-height:1.65; }
.casos-paginacion { margin-top:40px; text-align:center; font-size:15px; }
.casos-paginacion a, .casos-paginacion .current { padding:8px 14px; border-radius:8px; text-decoration:none; color:var(--navy-800); font-weight:600; }
.casos-paginacion .current { background:var(--navy-50); }
/* Check azul de reseña verificada, ahora por CSS */
.resena .estrellas::after {
content:""; display:inline-block; width:15px; height:15px; vertical-align:-2px;
background:url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
/* Título del caso (bloque post-title) sin necesidad de marcado especial */
.hero-caso2 .wp-block-post-title { margin:10px 0 0; }
/* TEST SFTP 20-07-2026 */
/* ── Solo en el editor: deshace el carrusel para editar cómodo ── */
.editor-styles-wrapper .carrusel {
display: block !important;
overflow: visible !important;
}
.editor-styles-wrapper .resena {
flex: none !important;
width: auto !important;
max-width: 620px;
margin: 0 auto 24px !important;
}
.editor-styles-wrapper .flecha { display: none !important; }