/* garciabriz.com — hoja de estilos única.
 *
 * Traducción a clases de los estilos en línea del diseño de Claude Design
 * (datos/claude-design/*.dc.html), con los mismos valores. Lo que el diseño calculaba
 * en JS según el tamaño de la ventana va en media queries al final:
 *   estrecho = ancho < 900 px · medio = ancho < 1280 px · bajo = alto < 760 px
 * Los colores que cambian con el scroll salen de las variables del tema
 * (.pagina[data-tema]), que pone js/main.js.
 */

/* ---------- Fuentes: las de Google Fonts servidas desde el dominio (tools/bajar-fuentes.py).
   Una regla por peso, como las declara Google: ver el aviso en esa herramienta ---------- */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(../assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(../assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---------- Base: el <style> del diseño y lo que añadía el motor de Claude Design ---------- */
html,body{height:100%;margin:0;padding:0}
/* garciabriz: las medidas van en rem. En escritorio, 1rem = 16 px, fijo, como cuando iban en px (no depende de la letra
   que tenga configurada el navegador). En móvil, a escala del ancho por debajo del de un Pixel 10 Pro (445 px de ancho en
   CSS, el móvil de Rafael, donde todo queda como estaba): la web se ve igual en cualquier iPhone o Android (lo pidió
   Rafael: en un Realme 14 Pro+, de 360 px, todo se veía un 24 % más grande y ocupaba más). Con un mínimo, para los muy
   estrechos. Y sin que Safari agrande el texto por su cuenta con el móvil en horizontal */
html{font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:#F5EFE6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-thickness:.0625rem;text-underline-offset:.1875rem}
a:hover{opacity:.75}
input,select,textarea,button{font:inherit}
[hidden]{display:none!important}
@keyframes gbHint{0%,62%,100%{opacity:1;transform:translateY(0)}70%{opacity:.25;transform:translateY(.1875rem)}78%{opacity:1;transform:translateY(0)}86%{opacity:.25;transform:translateY(.1875rem)}94%{opacity:1;transform:translateY(0)}}
/* La rueda del ratón de «Haz scroll»: en el diseño cambiaba de estado cada 900 ms con una
   transición de .85s (ease); esto es lo mismo sin temporizador de JS */
@keyframes gbRueda{0%{transform:translateY(0);opacity:1;animation-timing-function:ease}47.2222%{transform:translateY(.5625rem);opacity:.2}50%{transform:translateY(.5625rem);opacity:.2;animation-timing-function:ease}97.2222%{transform:translateY(0);opacity:1}100%{transform:translateY(0);opacity:1}}

/* Pantallas más anchas que 16:9 y que 1920 px (ultrapanorámicas, ventanas muy bajas): el diseño se
   estiraba a todo el ancho (el texto pegado a la izquierda y la escena suelta en medio). Ahí el
   contenido ocupa como mucho 1920 px o el ancho 16:9 de la pantalla, lo que sea mayor, centrado:
   --margen es lo que sobra a cada lado, y 0 en las demás pantallas (también en las grandes 16:9).
   Los fondos, la escena, el WhatsApp y el rótulo de sección siguen a todo el ancho, en sus
   esquinas. La escena hace la misma cuenta (margenV en src/escena/escena.js) */
:root{--acento:#C29A6A;--margen:max(0px,calc((100vw - max(1920px,177.78vh)) / 2));--lado:clamp(1rem,5vw,4.5rem)}
/* --lado: el margen lateral de todo (cabecera, portada y secciones), para que el contenido
   quede alineado con la cabecera. El diseño usaba tres distintos: 4vw hasta 48 px en la
   cabecera, 6vw hasta 110 en el texto de la portada y 5vw hasta 72 en las secciones (lo
   pidió Rafael). En móvil, 16 px, como ya tenían casi todas las secciones */
@media (max-width:899.98px){:root{--lado:1rem}html{font-size:clamp(12.5px,3.5956vw,16px)}}

/* ---------- Página y temas (T.l, T.d y T.a del diseño) ---------- */
.pagina{--bg:#F5EFE6;--fg:#2B221B;--hdr:rgba(245,239,230,.86);--linea:rgba(43,34,27,.14);--tarjeta:rgba(245,239,230,.88);--hdr-solido:#F5EFE6;--cta-bg:#5A4838;--cta-fg:#FFFFFF;
  min-height:100vh;background:var(--bg);color:var(--fg);transition:background-color .7s ease,color .7s ease;font-family:'Nunito Sans',system-ui,sans-serif}
.pagina[data-tema="d"]{--bg:#2B221B;--fg:#F5EFE6;--hdr:rgba(43,34,27,.82);--linea:rgba(245,239,230,.16);--tarjeta:rgba(43,34,27,.84);--hdr-solido:#2B221B;--cta-bg:var(--acento);--cta-fg:#2B221B}
.pagina[data-tema="a"]{--bg:var(--acento);--fg:#2B221B;--hdr:rgba(245,239,230,.8);--linea:rgba(43,34,27,.2);--tarjeta:rgba(245,239,230,.6)}
main{position:relative;z-index:1}

/* ---------- Escena 3D ---------- */
.escena{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;pointer-events:none}
/* garciabriz: la escena entra con un fundido corto cuando ya está lista (main.js: escena--lista) y, mientras tanto, un
   anillo que late donde va a salir (lo pidió Rafael). Solo aparece si tarda más de medio segundo y solo anima
   transform y opacity: sigue latiendo aunque el navegador esté ocupado construyendo la escena. Dónde: en escritorio,
   hacia el 70 % del ancho; en móvil, en el centro de la franja de la animación (la misma cuenta que .hero-servicio)
   y, en la home, en el cuarto, bajo el texto */
.escena{opacity:0;transition:opacity .45s ease-out}
.escena.escena--lista{opacity:1}
/* garciabriz: con la entrada de la home (las piezas del cuarto caen: main.js y ENTRADA en la escena), sin fundido: el
   lienzo empieza vacío y la entrada ya es la aparición (con fundido, los primeros botes salían medio transparentes) */
.escena.escena--entrada{transition:none}
/* garciabriz: en la portada de la home, con el cuarto debajo del texto (móvil en vertical, pantallas verticales: la escena
   pone escena--sobre-texto en el lienzo, en heroCam), la animación va por delante del texto (lo pidió Rafael el
   01-10-2026: al caer en la entrada, el muñeco pasaba por detrás). El texto baja a una capa entre el fondo de la página y
   el lienzo: la página hace de contexto de apilamiento y main deja de serlo, pero sigue posicionado y va después del
   lienzo, así que todo lo demás (las secciones, «Desliza hacia abajo») sigue encima. En el móvil en horizontal, donde el
   cuarto pisa el final del texto, y sin escena (sin GPU, con su imagen fija), como estaba */
.pagina[data-tipo="home"]{isolation:isolate}
.pagina[data-tipo="home"]>.escena--sobre-texto~main{z-index:auto}
.pagina[data-tipo="home"]>.escena--sobre-texto~main .hero__contenido{z-index:-1}
.escena-cargando{--cx:70vw;--cy:55vh;position:fixed;left:var(--cx);top:var(--cy);width:3.5rem;height:3.5rem;margin:-1.75rem 0 0 -1.75rem;z-index:0;pointer-events:none;animation:gbCargandoEntra .4s .5s ease-out backwards;transition:opacity .3s ease-out}
.escena-cargando::before,.escena-cargando::after{content:'';position:absolute;inset:0;border-radius:50%;border:.09375rem solid var(--acento);opacity:0;animation:gbCargandoLate 2s ease-out infinite}
.escena-cargando::after{animation-delay:1s}
.escena-cargando--fuera{opacity:0}
.pagina[data-tipo="home"] .escena-cargando{--cx:72vw;--cy:50vh}
@keyframes gbCargandoEntra{from{opacity:0}}
@keyframes gbCargandoLate{0%{transform:scale(.3);opacity:.7}100%{transform:scale(1.5);opacity:0}}
@media (max-width:899.98px){
  .escena-cargando{--cx:50vw;--cy:calc((6.5rem + clamp(50vh, 6.5rem + var(--k-movil, 0) * 100vw, 60vh)) / 2)}
  .pagina[data-tipo="home"] .escena-cargando{--cy:72vh}
}
@media (max-width:899.98px) and (orientation:portrait){
  .escena-cargando{--cy:calc((6.5rem + clamp(50vh, 6.5rem + var(--k-movil, 0) * 100vw, 90vh)) / 2)}
}

/* ---------- Cabecera, mega menú y menú móvil ---------- */
/* sin la línea de abajo que tenía en el diseño (lo pidió Rafael): el borde se queda, transparente,
   para que la cabecera mida lo mismo y no se mueva nada (barra de progreso, menús). Con un menú
   abierto sí se ve: es el borde inferior del panel, que sin ella se fundiría con la página */
.cabecera{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--hdr);color:var(--fg);-webkit-backdrop-filter:blur(.875rem);backdrop-filter:blur(.875rem);border-bottom:.0625rem solid transparent;transition:background-color .5s,color .5s}
.cabecera.con-panel{background:var(--hdr-solido);border-bottom-color:var(--linea)}
.cabecera__barra{height:4.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:0 calc(var(--margen) + var(--lado))}
.cabecera__logo{text-decoration:none;display:flex;align-items:center;gap:.75rem;white-space:nowrap}
.cabecera__logo img{height:3.375rem;width:auto}
.cabecera__logo .logo-oscuro{display:block}
.cabecera__logo .logo-claro{display:none}
.pagina[data-tema="d"] .cabecera__logo .logo-oscuro{display:none}
.pagina[data-tema="d"] .cabecera__logo .logo-claro{display:block}
/* los enlaces, a 17 px (en el diseño, 15; lo pidió Rafael: primero a 16 y el 01-10-2026, «un poquito más grande»),
   con el hueco entre ellos en proporción (26 px a 16 px) */
.cabecera__nav{display:flex;align-items:center;gap:1.75rem;font-size:1.0625rem;font-weight:600;white-space:nowrap}
.cabecera__nav a{text-decoration:none}
.cabecera__servicios{background:none;border:0;color:inherit;cursor:pointer;padding:.375rem 0;display:flex;align-items:center;gap:.375rem;font-weight:500}
/* Enlaces de la barra (lo pidió Rafael; en el diseño solo se aclaraban y no marcaban dónde estás):
   al pasar el ratón, un subrayado del color de la marca que crece desde la izquierda, y la sección
   de la página, subrayada (aria-current). El relleno de 6 px es el que ya tenía «Servicios»: la
   barra mide lo mismo */
.cabecera__nav>a{padding:.375rem 0}
.cabecera__nav>a,.cabecera__servicios{position:relative}
.cabecera__nav>a::after,.cabecera__servicios::after{content:'';position:absolute;left:0;right:0;bottom:.0625rem;height:.125rem;border-radius:.125rem;background:var(--acento);transform:scaleX(0);transform-origin:left center;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cabecera__servicios::after{right:1.125rem}
.cabecera__nav>a:hover{opacity:1}
.cabecera__nav>a:hover::after,.cabecera__nav>[aria-current]::after,.cabecera__servicios:hover::after,.cabecera__servicios[aria-expanded="true"]::after{transform:scaleX(1)}
.cabecera__flecha{display:inline-flex;align-items:center;transform:rotate(0deg);transition:transform .25s ease}
.cabecera__servicios[aria-expanded="true"] .cabecera__flecha{transform:rotate(180deg)}
.cabecera__flecha svg{display:block;width:.75rem;height:.75rem}
.cabecera__acciones{display:flex;align-items:center;gap:.625rem}
.cabecera__contacto{text-decoration:none;background:var(--cta-bg);color:var(--cta-fg);transition:background-color .5s,color .5s;font-weight:700;font-size:.875rem;padding:.6875rem 1.125rem;border-radius:62.4375rem;white-space:nowrap}
.cabecera__menu{display:none;background:none;border:.09375rem solid currentColor;color:inherit;border-radius:62.4375rem;padding:.5rem .875rem;font-weight:600;font-size:.875rem;cursor:pointer}
.cabecera__progreso{position:absolute;left:0;bottom:-.0625rem;height:.125rem;width:0%;background:var(--acento)}
/* Mega menú (lo pidió Rafael; en el diseño, una rejilla de cuatro columnas en el orden de los
   pilares, con un hueco abajo a la derecha): los servicios en tres grupos con su rótulo y, en el
   hueco del último, una tarjeta hacia Contacto con los colores del botón «Contacto». Al abrirse,
   todo entra escalonado en diagonal (--i, columna + fila); al pasar el ratón por un servicio, el
   icono se levanta y aparece una flecha junto al nombre */
.mega{border-top:.0625rem solid var(--linea);padding:1.375rem calc(var(--margen) + var(--lado)) 1.625rem}
.mega__rejilla{max-width:73.75rem;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 1.125rem}
.mega__grupo{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.mega__etiqueta{margin:0 0 .25rem;padding:0 .875rem;display:flex;align-items:center;gap:.625rem;font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.mega__etiqueta .punto{flex:none}
.mega__item{text-decoration:none;display:flex;gap:.875rem;align-items:flex-start;padding:.875rem;border-radius:.875rem;transition:background-color .15s}
.mega__item:hover{background-color:rgba(156,138,116,.16)!important;opacity:1!important}
.mega__textos{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.mega__nombre{font-weight:800;font-size:1rem;line-height:1.2}
.mega__nombre::after{content:'→';display:inline-block;margin-left:.5rem;color:var(--acento);opacity:0;transform:translateX(-.375rem);transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.mega__item:hover .mega__nombre::after{opacity:1;transform:none}
.mega__valor{font-size:.8125rem;line-height:1.45;font-weight:500;opacity:.8;text-wrap:pretty}
.mega .icono-pilar{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.mega__item:hover .icono-pilar{transform:translateY(-.1875rem);box-shadow:0 .5rem 1rem -.5rem rgba(43,34,27,.55)}
.mega__destacado{flex:1;margin-top:.375rem;display:flex;flex-direction:column;gap:.375rem;padding:1.25rem 1.375rem;border-radius:1rem;background:var(--cta-bg);color:var(--cta-fg);text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.mega__destacado:hover{opacity:1;transform:translateY(-.125rem);box-shadow:0 1rem 1.875rem -1.125rem rgba(43,34,27,.7)}
.mega__destacado-titulo{font-weight:800;font-size:1.125rem;line-height:1.2}
.mega__destacado-texto{font-size:.8125rem;line-height:1.45;font-weight:500;opacity:.85;text-wrap:pretty}
.mega__destacado-cta{margin-top:auto;padding-top:.625rem;font-weight:700;font-size:.875rem}
.mega__destacado-cta::after{content:'→';display:inline-block;margin-left:.5rem;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.mega__destacado:hover .mega__destacado-cta::after{transform:translateX(.25rem)}
/* garciabriz: el personaje, abajo a la derecha, señalando «Cuéntame tu caso» (animado al abrir el menú: iniciarPersonajeMenu
   en main.js); la tarjeta lo corta por abajo. Anclado abajo: la punta del dedo, a la mitad de su alto, queda un poco por
   encima del enlace, que va al fondo de la tarjeta, sea cual sea su alto; como el dedo apunta algo hacia abajo, señala justo
   el enlace (lo pidió Rafael el 30-09-2026) */
.mega__destacado{position:relative;overflow:hidden;padding-right:8.5rem}
.mega__destacado-personaje{position:absolute;right:.75rem;bottom:-5.2rem;height:15.5rem;width:auto;pointer-events:none}
@media (max-width:1279.98px){.mega__destacado{padding-right:7rem}.mega__destacado-personaje{right:.625rem;bottom:-4.1rem;height:13rem}}
/* solo el estado de partida (backwards): al acabar, la animación no pisa los transform del ratón */
@keyframes gbMegaEntra{from{opacity:0;transform:translateY(.5rem)}}
.mega__etiqueta,.mega__item,.mega__destacado{animation:gbMegaEntra .4s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 45ms) backwards}
.icono-pilar{flex:none;width:2.75rem;height:2.75rem;border-radius:.75rem;background:var(--acento);display:flex;align-items:center;justify-content:center}
.icono-pilar>span{display:block;width:1.5rem;height:1.5rem;background-position:center;background-size:contain;background-repeat:no-repeat}
.icono-pilar--menu{width:2.25rem;height:2.25rem;border-radius:.625rem}
.icono-pilar--menu>span{width:1.25rem;height:1.25rem}
.menu-movil{border-top:.0625rem solid var(--linea);padding:1.25rem 1rem 1.75rem;display:flex;flex-direction:column;gap:1.125rem;max-height:calc(100vh - 4rem);overflow:auto;box-sizing:border-box}
.menu-movil__grande{text-decoration:none;font-weight:700;font-size:1.125rem;display:flex;align-items:center;gap:.75rem} /* garciabriz: con icono, como los servicios (lo pidió Rafael) y, desde el 03-10-2026, de su mismo tamaño (lo pidió él: «que todos los textos sean del mismo tamaño»; antes, 1.25rem) */
.menu-movil__etiqueta{font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.8;margin-top:.25rem}
.menu-movil__pilar{text-decoration:none;display:flex;align-items:center;gap:.75rem;font-weight:700;font-size:1.125rem}
.menu-movil__raya{height:.0625rem;background:var(--linea)}

/* ---------- Rótulo de sección (HUD) ---------- */
.hud{position:fixed;left:clamp(1.25rem,4vw,3rem);bottom:1.75rem;z-index:40;display:flex;align-items:center;gap:.625rem;font:600 .75rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .4s;pointer-events:none}
.hud.visible{opacity:1}
.punto{width:.5rem;height:.5rem;border-radius:50%;background:var(--acento)}

/* ---------- WhatsApp (WhatsApp.dc.html) ---------- */
.wa{--wa-abajo:clamp(1.25rem,3vw,1.75rem);--wa-alto:12.75rem;position:fixed;right:clamp(1.25rem,3vw,2rem);bottom:var(--wa-abajo);z-index:45;width:10.625rem;height:var(--wa-alto);pointer-events:none}
.wa__lienzo{position:absolute;right:0;bottom:calc(0rem - var(--wa-abajo));width:10.625rem;height:var(--wa-alto);pointer-events:none;opacity:0;will-change:transform}
/* el borde del bocadillo, de 1 px (en el diseño, 2): lo pidió Rafael */
.wa__globo{position:absolute;right:0;bottom:calc(var(--wa-alto) - 2.125rem);width:max-content;max-width:14.375rem;opacity:0;pointer-events:none;background:#2B221B;color:#FFFFFF;border:.0625rem solid #FFFFFF;border-radius:1.125rem 1.125rem .25rem 1.125rem;padding:.75rem 2.125rem .75rem .875rem;box-shadow:0 .875rem 2.125rem -.875rem rgba(0,0,0,.45);font-family:'Nunito Sans',system-ui,sans-serif}
.wa__cerrar{position:absolute;top:.375rem;right:.375rem;width:1.5rem;height:1.5rem;border:0;border-radius:50%;background:transparent;color:#E9DCC8;cursor:pointer;font-size:1rem;line-height:1}
.wa__texto{display:block;font-weight:400;font-size:.9375rem;line-height:1.3;text-wrap:balance}
.wa__boton{position:absolute;right:0;bottom:0;width:3.625rem;height:3.625rem;opacity:0;pointer-events:auto;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 .625rem 1.625rem -.5rem rgba(0,0,0,.45)}
.wa__boton:hover{transform:scale(1.08)!important;opacity:1!important}

/* ---------- Piezas comunes ---------- */
.antetitulo{margin:0;font:600 .75rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
/* garciabriz: los botones principales («Contacta conmigo», «Mi trayectoria completa», «Enviar», el del bloque de contacto
   y «Ver la web» de los casos), del marrón de la web, el del botón «Contacto» de la cabecera: en el diseño, casi negros
   (#2B221B, con el texto crema). Lo pidió Rafael */
.boton-oscuro{text-decoration:none;background:#5A4838;color:#FFFFFF;font-weight:700;font-size:.9375rem;padding:.8125rem 1.25rem;border-radius:62.4375rem}
.boton-borde{text-decoration:none;border:.09375rem solid #2B221B;font-weight:600;font-size:.9375rem;padding:.71875rem 1.25rem;border-radius:62.4375rem}
.boton-acento{text-decoration:none;align-self:flex-start;display:inline-flex;align-items:center;gap:.625rem;background:var(--acento);color:#2B221B;font-weight:700;font-size:.9375rem;padding:.8125rem 1.25rem;border-radius:62.4375rem}
.botones{display:flex;flex-wrap:wrap;gap:.75rem}
/* Bloques transparentes sobre la escena (blockPad) y su tarjeta (cardPad, cardBg, cardBlur):
   sin fondo en escritorio; con el color del tema y desenfoque por debajo de 1280 px */
.bloque{display:flex;flex-direction:column;justify-content:center;padding:0 calc(var(--margen) + var(--lado));box-sizing:border-box}
.tarjeta-bloque{display:flex;flex-direction:column;padding:0;border-radius:1.25rem;background:transparent;backdrop-filter:none}
.seccion{padding:clamp(5.5rem,11vw,10rem) calc(var(--margen) + var(--lado))}
.seccion--crema{background:#F5EFE6;color:#2B221B}
.seccion--oscura{background:#2B221B;color:#F5EFE6}
.seccion--arena{background:#EDE4D6;color:#2B221B}
.cabeza{display:flex;flex-direction:column;gap:1rem}
.cabeza-fila{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.25rem}
.titulo-seccion{margin:0;font-size:clamp(1.8275rem,3.956vw,3.87rem);line-height:.95;letter-spacing:-0.0175em;font-weight:800}
.equilibrado{text-wrap:balance}
.enlace-fuerte{font-size:1rem;font-weight:700}
.parrafo{margin:0;font-size:1.125rem;line-height:1.65;color:#4A3B2E;text-wrap:pretty}

/* ---------- Home: hero ---------- */
.hero{height:100vh;min-height:40rem;position:relative;box-sizing:border-box;pointer-events:none}
.hero__contenido{--hero-desplaza:-50%;--hero-y:0rem;position:absolute;left:calc(var(--margen) + var(--lado));top:53%;transform:translateY(calc(var(--hero-desplaza) + var(--hero-y)));display:flex;flex-direction:column;gap:1.25rem;max-width:min(33.75rem,46vw)}
.hero__antetitulo{display:flex;align-items:center;gap:.625rem}
.hero__h1{margin:0;font-size:clamp(2.15rem,3.784vw,3.87rem);line-height:.95;letter-spacing:-0.0175em;font-weight:800;text-wrap:balance}
.hero__sub{margin:0;font-size:1.0625rem;line-height:1.55;text-wrap:pretty;opacity:.88}
.hero__scroll{position:fixed;z-index:6;transition:opacity .3s;left:50%;bottom:1.5rem;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.625rem;font:700 .8125rem 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;pointer-events:auto;cursor:pointer;padding:.5rem .875rem;color:#5A4838}
.hero__raton{width:1.5rem;height:2.375rem;border:.125rem solid #C29A6A;color:#C29A6A;border-radius:.8125rem;display:flex;justify-content:center;padding-top:.375rem;box-sizing:border-box;animation:gbHint 3.2s ease-in-out infinite}
.hero__rueda{width:.1875rem;height:.4375rem;border-radius:.125rem;background:currentColor;transform:translateY(0);opacity:1;animation:gbRueda 1.8s linear .9s infinite}
.hero__scroll-texto{animation:gbHint 3.2s ease-in-out infinite}
/* garciabriz: «Haz scroll», más visible (lo pidió Rafael): el ratón, algo más grande y con un anillo que late alrededor; el
   texto, más oscuro y fijo (en el diseño parpadeaba hasta casi desaparecer, gbHint); debajo, dos flechas que bajan por
   turnos; y todo el conjunto da de vez en cuando un pequeño empujón hacia abajo (con `translate`, que no pisa el
   `transform` que lo centra) */
.hero__scroll{color:#2B221B;gap:.5625rem;animation:gbEmpuje 3s ease-in-out infinite}
.hero__raton{width:1.75rem;height:2.75rem;border-width:.15625rem;border-radius:.9375rem;padding-top:.4375rem;position:relative;animation:none}
.hero__raton::before{content:'';position:absolute;inset:-.15625rem;border:.125rem solid #C29A6A;border-radius:.9375rem;pointer-events:none;animation:gbAnillo 2.4s ease-out infinite}
.hero__rueda{width:.25rem;height:.5rem}
.hero__scroll-texto{animation:none}
.hero__scroll-movil{display:none}
.hero__flechas{display:flex;flex-direction:column;align-items:center;margin-top:-.125rem}
.hero__flechas>span{width:.5625rem;height:.5625rem;margin-top:-.125rem;border-right:.15625rem solid #C29A6A;border-bottom:.15625rem solid #C29A6A;transform:rotate(45deg);opacity:0;animation:gbFlecha 1.6s ease-in-out infinite}
.hero__flechas>span:nth-child(2){animation-delay:.22s}
@keyframes gbAnillo{0%{transform:scale(1);opacity:.7}75%,100%{transform:scale(1.9,1.55);opacity:0}}
@keyframes gbFlecha{0%{opacity:0;translate:0 -.3125rem}40%{opacity:1}80%,100%{opacity:0;translate:0 .375rem}}
/* garciabriz: fija abajo durante todo el recorrido de la escena, hasta «Por qué trabajar conmigo» (lo pidió Rafael; en el diseño, solo en la portada): en los tramos oscuros, el texto claro */
[data-tema="d"] .hero__scroll{color:#F5EFE6}
/* garciabriz: las secciones a las que llevan los enlaces internos reciben el foco (para el teclado), sin recuadro */
.destino-ancla:focus{outline:none}
@keyframes gbEmpuje{0%,55%,100%{translate:0 0}65%{translate:0 .375rem}75%{translate:0 0}85%{translate:0 .1875rem}95%{translate:0 0}}

/* ---------- Home: experiencia y sectores ---------- */
.confianza{min-height:105vh}
.confianza .tarjeta-bloque{gap:1.75rem;max-width:35rem}
.cifra{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.cifra__numero{font-size:clamp(3.87rem,7.74vw,7.525rem);line-height:.8;letter-spacing:-0.03em;font-weight:800}
.cifra__texto{font-size:1.25rem;font-weight:700;line-height:1.2;max-width:10em}
.grupo{display:flex;flex-direction:column;gap:.75rem}
.clientes__todos{align-self:flex-start;margin-top:.25rem} /* garciabriz: «Ver todos los casos de éxito» bajo los logos de clientes */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{font-size:.9375rem;font-weight:600;padding:.5rem .875rem;border:.09375rem solid currentColor;border-radius:62.4375rem}
.clientes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.625rem}
/* logos de clientes: el mismo relleno en todas las baldosas y cada logo a su tamaño exacto
   (atributos width y height; ver logo_cliente en tools/generar.py). Por debajo de 636 px la
   baldosa se estrecha y el logo va en % (--pc) */
.clientes a{height:3.25rem;border:.09375rem solid;border-radius:.625rem;display:flex;align-items:center;justify-content:center;padding:.3125rem .5rem;box-sizing:border-box}
.clientes img{display:block;flex:none}
@media (max-width:635.98px){.clientes img{width:var(--pc);height:auto}}

/* ---------- Home: pilares ---------- */
.servicios-intro{min-height:100vh}
.servicios-intro .tarjeta-bloque{gap:1.375rem;max-width:36.25rem}
.titulo-servicios{margin:0;font-size:clamp(1.8275rem,3.44vw,3.3325rem);line-height:.98;letter-spacing:-0.015em;font-weight:800;text-wrap:balance}
.parrafo-intro{margin:0;font-size:1.125rem;line-height:1.6;text-wrap:pretty;opacity:.88}
.pilar{min-height:95vh;scroll-margin-top:4rem}
.pilar.pilar--principal{min-height:120vh}
.pilar .tarjeta-bloque{gap:1.125rem;max-width:35rem}
.pilar__num{margin:0;font:600 .8125rem 'JetBrains Mono',monospace;letter-spacing:.08em;display:flex;gap:.625rem;align-items:center;flex-wrap:wrap}
.pilar__actual{color:var(--acento)}
.pilar__total{opacity:.75}
.insignia{background:var(--acento);color:#2B221B;padding:.1875rem .5rem;border-radius:62.4375rem;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase}
.pilar__titulo{margin:0;font-size:clamp(1.785rem,3.192vw,2.94rem);line-height:.98;letter-spacing:-0.015em;font-weight:800}
.pilar--principal .pilar__titulo{font-size:clamp(2.6rem,5.12vw,5.2rem)}
.pilar__valor{margin:0;font-size:1.125rem;line-height:1.5;font-weight:500;text-wrap:pretty}
.pilar--principal .pilar__valor{font-size:1.3125rem}
.pilar__lista{list-style:none;margin:.25rem 0 0;padding:0;display:flex;flex-direction:column;border-top:.0625rem solid var(--linea)}
.pilar__lista li{border-bottom:.0625rem solid var(--linea)}
.pilar__lista li>span{display:flex;justify-content:space-between;gap:.75rem;padding:.6875rem 0;font-size:1rem}

/* ---------- Home: por qué ---------- */
.por-que{display:flex;flex-direction:column;gap:3rem}
.por-que .cabeza{max-width:47.5rem}
.razones{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:2.25rem 1.75rem}
.razon{display:flex;flex-direction:column;gap:.75rem;padding-top:1.125rem;border-top:.125rem solid #2B221B}
.razon__num{font:600 .8125rem 'JetBrains Mono',monospace}
.razon h3{margin:0;font-size:1.425rem;line-height:1.1;letter-spacing:-0.01em;font-weight:800}
.razon p{margin:0;font-size:1rem;line-height:1.6;color:#5A4838;text-wrap:pretty}

/* ---------- Tarjetas de caso (home y Casos) ---------- */
.casos{display:flex;flex-direction:column;gap:3rem;scroll-margin-top:4rem}
.rejilla-casos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,21.25rem),1fr));gap:1.75rem}
/* garciabriz: en la home, los casos y los artículos del blog en slides (lo pidió Rafael; en el diseño, una rejilla con
   todos los casos y otra con tres artículos): se pasan con las flechas de la cabecera (js/main.js, data-slides), deslizando
   o arrastrando con el ratón, se ajustan a cada tarjeta y la fila llega a los bordes
   (los de la caja de 1920 px en las pantallas ultrapanorámicas), con la primera tarjeta alineada con el texto. Siempre
   asoma el 40 % de la siguiente (el 20 % en móvil, para que la tarjeta no quede estrecha), para que se vea que hay más:
   `--v` es lo que se ve de la fila y las tarjetas miden (--v - n huecos) / (n + 0,4), con n tarjetas enteras según el
   ancho (1 en móvil, 2 en tableta, 3 en portátil, 4 y 5 en pantallas grandes) */
.fila-slides{--v:calc(100vw - 2 * var(--margen) - var(--lado));display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((var(--v) - 1rem) / 1.2);gap:1rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--lado));padding:.5rem var(--lado) 1.625rem;scroll-padding-inline:var(--lado);scrollbar-width:none}
.fila-slides::-webkit-scrollbar{display:none}
.fila-slides>*{scroll-snap-align:start}
.fila-slides:focus-visible{outline:.125rem solid var(--acento);outline-offset:-.125rem}
@media (pointer:fine){.fila-slides{cursor:grab}}
.fila-slides.arrastrando{cursor:grabbing;user-select:none}
.fila-slides.sin-ajuste{scroll-snap-type:none}
@media (min-width:700px){.fila-slides{grid-auto-columns:calc((var(--v) - 2rem) / 2.4)}}
@media (min-width:900px){.fila-slides{gap:1.75rem;grid-auto-columns:calc((var(--v) - 3.5rem) / 2.4)}}
@media (min-width:1280px){.fila-slides{grid-auto-columns:calc((var(--v) - 5.25rem) / 3.4)}}
@media (min-width:1760px){.fila-slides{grid-auto-columns:calc((var(--v) - 7rem) / 4.4)}}
@media (min-width:2240px){.fila-slides{grid-auto-columns:calc((var(--v) - 8.75rem) / 5.4)}}
@media (min-width:1921px) and (min-aspect-ratio:16/9){.fila-slides{grid-auto-columns:calc((var(--v) - 7rem) / 4.4)}}
@media (min-width:1921px) and (min-aspect-ratio:16/9) and (min-height:1260px){.fila-slides{grid-auto-columns:calc((var(--v) - 8.75rem) / 5.4)}}
.mandos{display:flex;align-items:center;gap:.875rem 1.375rem;flex-wrap:wrap}
.flechas{display:flex;gap:.625rem}
.flecha{width:3.25rem;height:3.25rem;padding:0;border-radius:50%;border:.09375rem solid rgba(245,239,230,.4);background:transparent;color:#F5EFE6;font:700 1.25rem 'Nunito Sans',system-ui,sans-serif;line-height:1;display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s,color .2s,opacity .2s}
.flecha:hover:not(:disabled){background:var(--acento);border-color:var(--acento);color:#2B221B}
.flecha:focus-visible{outline:.125rem solid var(--acento);outline-offset:.1875rem}
.flecha:disabled{opacity:.3;cursor:default}
@media (max-width:899.98px){.flecha{width:2.875rem;height:2.875rem;font-size:1.125rem}}
/* las del blog, sobre fondo claro */
.flechas--claro .flecha{border-color:rgba(43,34,27,.4);color:#2B221B}
.tarjeta-caso{text-decoration:none;color:#2B221B;display:flex;flex-direction:column;border-radius:1.375rem;overflow:hidden;background:#FFFFFF;box-shadow:0 1.5rem 3.75rem -2.25rem rgba(43,34,27,.5);transition:transform .25s}
.tarjeta-caso:hover{transform:translateY(-.25rem)!important;opacity:1!important}
.tarjeta-caso__imagen{position:relative;aspect-ratio:16/10;background:#EDE4D6}
.tarjeta-caso__imagen img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.tarjeta-caso__cuerpo{padding:1.625rem;display:flex;flex-direction:column;gap:.875rem;flex:1}
.tarjeta-caso__fila{display:flex;justify-content:space-between;align-items:center;gap:.75rem}
.tarjeta-caso__sector{font:500 .75rem 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#6B5A48}
.tarjeta-caso__logo{height:1.75rem;display:flex;align-items:center}
.tarjeta-caso__logo img{display:block}
.tarjeta-caso__titulo{margin:0;font-size:1.5437rem;line-height:1.08;letter-spacing:-0.01em;font-weight:800;text-wrap:balance}
.etiquetas{display:flex;flex-wrap:wrap;gap:.375rem}
.etiquetas>span{font:500 .6875rem 'JetBrains Mono',monospace;letter-spacing:.04em;padding:.3125rem .5625rem;border:.0625rem solid rgba(43,34,27,.25);border-radius:62.4375rem}
.metricas{display:flex;gap:1.75rem;margin-top:auto;padding-top:.375rem}
.metrica{display:flex;flex-direction:column;gap:.125rem}
.metrica__n{font-size:1.7812rem;font-weight:800;letter-spacing:-0.01em;color:#8A6A45}
.metrica__l{font-size:.8125rem;color:#4A3B2E}
.ver-caso{font-weight:700;font-size:.9375rem;display:inline-flex;gap:.5rem;align-items:center}

/* ---------- Home: sobre mí ---------- */
.sobre-mi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:2.5rem clamp(2rem,6vw,6rem);align-items:center;scroll-margin-top:4rem}
.sobre-mi__foto{aspect-ratio:1 / 1;max-width:28.75rem;width:100%;border-radius:1.5rem;overflow:hidden;background:#E6DCCD}
.sobre-mi__foto img{width:100%;height:100%;object-fit:cover;display:block}
.sobre-mi__texto{display:flex;flex-direction:column;gap:1.25rem;max-width:35rem}

/* ---------- Home: blog ---------- */
.recursos{border-top:.0625rem solid rgba(43,34,27,.12);display:flex;flex-direction:column;gap:3rem;scroll-margin-top:4rem}
.rejilla-posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));gap:1.75rem}

/* ---------- Preguntas frecuentes ---------- */
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,21.25rem),1fr));gap:2.5rem clamp(2rem,6vw,6rem);align-items:start}
.faq__lista{display:flex;flex-direction:column;border-top:.0625rem solid rgba(245,239,230,.2)}
.faq__item{border-bottom:.0625rem solid rgba(245,239,230,.2)}
.faq__item h3{margin:0;font-size:inherit}
.faq__boton{width:100%;background:none;border:0;color:inherit;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.375rem 0;text-align:left;font-size:1.1875rem;font-weight:700;line-height:1.3}
.faq__mas{font-size:1.5rem;font-weight:400;transform:rotate(0deg);transition:transform .25s;flex:none}
/* garciabriz: en las páginas de servicio con texto propio el «+» lo pone el CSS, para que no forme parte del texto
   del encabezado (h3) que leen Google y las IA; se ve igual */
.faq__mas:empty::before{content:'+'}
.faq__boton[aria-expanded="true"] .faq__mas{transform:rotate(45deg)}
.faq__respuesta{margin:0 0 1.375rem;font-size:1rem;line-height:1.65;color:#E3D8CA;max-width:40em;text-wrap:pretty}

/* ---------- Contacto: tarjeta con formulario y contacto directo ---------- */
.contacto-home{min-height:100vh;padding:6rem calc(var(--margen) + var(--lado));box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;scroll-margin-top:4rem}
/* garciabriz: sin el cuarto de la escena al final de la home (lo pidió Rafael), el bloque ya no ocupa toda la pantalla con el
   formulario abajo (en el diseño, el hueco de arriba era para verlo): mide lo que su contenido */
.contacto-home{min-height:0}
.tarjeta-form{display:flex;flex-direction:column;gap:1.375rem;max-width:38.75rem;width:100%;box-sizing:border-box;padding:clamp(1.375rem,3vw,2.25rem);border-radius:1.5rem;background:#F5EFE6;color:#2B221B;box-shadow:0 1.5rem 3.75rem -1.25rem rgba(0,0,0,.35)}
.titulo-form{margin:0;font-size:clamp(1.72rem,3.44vw,3.01rem);line-height:.95;letter-spacing:-0.0175em;font-weight:800;text-wrap:balance}
.gracias{padding:1.375rem;border-radius:1rem;background:var(--acento);font-size:1.1875rem;font-weight:700;line-height:1.4}
/* garciabriz: el campo trampa contra el spam de los formularios (js/main.js), fuera de la vista; al ir en absoluto, no
   ocupa sitio en la rejilla del formulario */
.formulario .trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* garciabriz: el hueco del widget de Cloudflare Turnstile (js/main.js): fuera de la rejilla del formulario, salvo si
   Cloudflare pide interactuar, que entra en ella, encima del botón, a todo el ancho */
.formulario .turnstile{position:absolute}
.formulario .turnstile--visible{position:static;grid-column:1/-1}
.formulario{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13.75rem),1fr));gap:.75rem}
.formulario label{display:flex;flex-direction:column;gap:.375rem;font:500 .8125rem 'JetBrains Mono',monospace}
.formulario input,.formulario textarea{background:#fff;border:.09375rem solid #C7B8A4;border-radius:.625rem;padding:.75rem .875rem;color:#2B221B;font-size:1rem;font-family:'Nunito Sans',sans-serif}
.formulario__acciones{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.625rem;margin-top:.375rem}
.boton-enviar{background:#5A4838;color:#FFFFFF;border:0;font-weight:800;font-size:1rem;padding:.9375rem 1.375rem;border-radius:62.4375rem;cursor:pointer}
.directo{display:flex;flex-direction:column;gap:.875rem;max-width:38.75rem;width:100%;box-sizing:border-box;margin-top:2.25rem}
.directo__opciones{display:flex;flex-wrap:wrap;gap:.75rem}
.tarjeta-directa{text-decoration:none;flex:1 1 auto;display:flex;flex-direction:column;gap:.5rem;padding:1.375rem 1.5rem;border-radius:1.25rem;background:#2B221B;color:#F5EFE6;box-shadow:0 1.5rem 3.75rem -1.5rem rgba(0,0,0,.4)}
.tarjeta-directa:hover{background:#3A2F26!important;opacity:1!important}
.tarjeta-directa__etiqueta{font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--acento)}
.tarjeta-directa__valor{font-size:clamp(1.1281rem,1.71vw,1.425rem);font-weight:800;letter-spacing:-0.01em;white-space:nowrap;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.tarjeta-directa__flecha{font-size:1.375rem;color:var(--acento)}

/* ---------- Páginas interiores con escena (servicios, casos, sobre mí, contacto): hero ---------- */
/* svcHeroPad, svcMaxW, svcCardPad y svcCardBg del diseño: la tarjeta solo tiene fondo en
   estrecho, pero el desenfoque (cardBlur) va por debajo de 1280 aunque sea transparente */
.hero-servicio{min-height:80vh;display:flex;flex-direction:column;justify-content:center;padding:5.5rem calc(var(--margen) + var(--lado)) 1.75rem;box-sizing:border-box}
.tarjeta-servicio{display:flex;flex-direction:column;gap:1rem;max-width:min(37.5rem, 50vw);padding:0;border-radius:1.25rem;background:transparent;backdrop-filter:none}
.antetitulo--punto{display:flex;align-items:center;gap:.625rem}
.antetitulo a{text-decoration:none}
.titulo-servicio{margin:0;font-size:clamp(1.8275rem,3.44vw,3.44rem);line-height:.95;letter-spacing:-0.0175em;font-weight:800;text-wrap:balance}
.entradilla{margin:0;font-size:1.25rem;line-height:1.5;font-weight:500;text-wrap:pretty}
.hero-servicio__botones{display:flex;flex-wrap:wrap;gap:.625rem}
.boton-acento-hero{text-decoration:none;background:var(--acento);color:#2B221B;font-weight:700;font-size:.9375rem;padding:.875rem 1.25rem;border-radius:62.4375rem}
.boton-contorno{text-decoration:none;border:.09375rem solid currentColor;font-weight:600;font-size:.9375rem;padding:.78125rem 1.25rem;border-radius:62.4375rem}
/* Recuadros «Hueco para texto SEO» del diseño (se ven en la web hasta tener el texto) */
.hueco{border:.09375rem dashed rgba(43,34,27,.35);border-radius:.875rem;padding:1.25rem 1.375rem;display:flex;flex-direction:column;gap:.625rem;max-width:47.5rem}
.hueco--oscuro{border-color:rgba(245,239,230,.4)}
.hueco--hero{border-color:rgba(245,239,230,.4);border-radius:.75rem;padding:.75rem 1rem;gap:.375rem;max-width:35rem}
.hueco__etiqueta{font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.hueco p{margin:0;font-size:1rem;line-height:1.65;text-wrap:pretty}
.hueco--hero p{font-size:.9375rem;line-height:1.5}
/* garciabriz: el texto propio que sustituye a los huecos «Hueco para texto SEO» del diseño (tools/textos_servicios.py),
   a todo el ancho (lo pidió Rafael, como en las páginas legales; el de la cabecera, dentro de su tarjeta) y con la
   letra del artículo del blog; el color, el de los textos de cada sección. Sus preguntas frecuentes van en su propia
   sección, con el acordeón de Contacto (.faq-contacto) */
.texto-seo{display:flex;flex-direction:column;gap:1rem}
.texto-seo p{margin:0;font-size:1.0625rem;line-height:1.7;text-wrap:pretty}
.texto-seo h3{margin:1rem 0 0;font-size:1.3062rem;line-height:1.15;letter-spacing:-0.0075em;font-weight:800;text-wrap:balance}
.faq-contacto__respuesta a{color:inherit;text-decoration:underline;text-underline-offset:.1875rem}
.texto-seo ul{margin:0;padding-left:1.25rem;display:flex;flex-direction:column;gap:.5rem;font-size:1.0625rem;line-height:1.6}
.texto-seo strong{font-weight:700}
.texto-seo a{color:inherit;text-decoration:underline;text-underline-offset:.1875rem}
.incluye .texto-seo p,.incluye .texto-seo ul{color:#4A3B2E}
.mas-info .texto-seo p,.mas-info .texto-seo ul{color:#3A2E24}
.como .texto-seo p{color:#E3D8CA}
.seccion--capa{position:relative;z-index:1}

/* ---------- Páginas de servicio ---------- */
.incluye{display:flex;flex-direction:column;gap:3rem;scroll-margin-top:4.5rem}
.incluye .cabeza{max-width:47.5rem}
.rejilla-incluye{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));gap:2.25rem 1.75rem}
.incluye-item{border-top:.125rem solid #2B221B;padding-top:1.125rem;display:flex;flex-direction:column;gap:.625rem}
.incluye-item h3{margin:0;font-size:1.3062rem;line-height:1.15;letter-spacing:-0.0075em;font-weight:800}
.incluye-item p{margin:0;font-size:1rem;line-height:1.6;color:#4A3B2E;text-wrap:pretty}
.mas-info{display:flex;flex-direction:column;gap:1.75rem}
.titulo-mas{margin:0;font-size:clamp(1.6125rem,3.096vw,3.01rem);line-height:1;letter-spacing:-0.015em;font-weight:800;max-width:23.26em;text-wrap:balance}
.como{display:flex;flex-direction:column;gap:3rem}
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:2.25rem 1.75rem}
.pasos li{display:flex;flex-direction:column;gap:.75rem}
.pasos__num{font:600 .8125rem 'JetBrains Mono',monospace;color:var(--acento)}
.pasos h3{margin:0;font-size:1.425rem;font-weight:800;letter-spacing:-0.01em}
.pasos p{margin:0;font-size:1rem;line-height:1.6;color:#E3D8CA}
/* garciabriz: páginas de servicio con texto propio (tools/textos_servicios.py): el texto repartido en piezas del
   diseño (lo eligió Rafael: el texto corrido parecía pegado encima), alternando fondos claros, oscuros y de acento,
   con desplegables (el acordeón de Contacto; el texto sigue en el HTML) y una llamada a la acción suelta entre
   secciones (las tres cosas las pidió él). Las tarjetas y los pasos, los de arriba; la ficha de quién hay detrás, la
   «Sobre mí» de la home; los checks, los del bloque de contacto; la banda de la llamada, la cita de «Sobre mí» */
.seccion--acento{background:var(--acento);color:#2B221B}
@media (min-width:900px){.rejilla-incluye--tres{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* garciabriz: con ocho tarjetas (SEO, desde que lleva SEO local y linkbuilding), dos filas de cuatro; en tableta, de dos en dos */
@media (min-width:900px){.rejilla-incluye--cuatro{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.rejilla-incluye--cuatro{grid-template-columns:repeat(4,minmax(0,1fr))}}
.seccion--oscura .incluye-item{border-top-color:rgba(245,239,230,.4)}
.seccion--oscura .incluye-item p{color:#E3D8CA}
/* el panel oscuro de «Qué incluye»: la frase y las notas */
.panel-oscuro{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:2rem clamp(2rem,6vw,6rem);align-items:start;padding:clamp(1.75rem,4vw,3.5rem);border-radius:1.5rem;background:#2B221B;color:#F5EFE6}
.panel-oscuro__lema{margin:0;font-size:clamp(1.365rem,2.366vw,2.0475rem);line-height:1.2;letter-spacing:-0.0125em;font-weight:700;text-wrap:balance}
.notas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.notas li{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:1rem;align-items:baseline;padding:.875rem 0;border-top:.0625rem solid rgba(245,239,230,.16);font-size:1rem;line-height:1.55;color:#E3D8CA}
.notas li:first-child{border-top:0;padding-top:0}
.notas a{color:inherit;text-decoration:underline;text-underline-offset:.1875rem}
.notas__etiqueta{margin:0;font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--acento)}
/* ¿Qué hace…?: la definición, visible (es la respuesta a la búsqueda), y el resto en desplegables */
.que-hace{display:flex;flex-direction:column;gap:2.5rem}
.definicion{margin:0;font-size:clamp(1.375rem,2.3vw,2rem);line-height:1.35;letter-spacing:-0.015em;font-weight:500;text-wrap:pretty}
.desplegables{display:flex;flex-direction:column;border-bottom:.09375rem solid rgba(43,34,27,.2)}
.desplegable{border-top:.09375rem solid rgba(43,34,27,.2)}
.desplegable__boton{gap:1.25rem;padding:1.5rem 0;font-family:inherit;font-size:clamp(1.1875rem,1.9vw,1.5437rem);font-weight:800;line-height:1.2;letter-spacing:-0.01em}
.desplegable__mas{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--acento);color:#2B221B;font-size:1.375rem;line-height:1}
.desplegable__cuerpo{display:flex;flex-direction:column;gap:1.25rem;margin:0;padding:0 0 2rem;max-width:none;font-size:1.0625rem;color:#3A2E24}
.desplegable__cuerpo>p{margin:0;line-height:1.7;text-wrap:pretty}
.sintomas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.625rem}
.sintomas li{border-radius:62.4375rem;padding:.5rem .9375rem;background:rgba(194,154,106,.22);color:#2B221B;font-size:.9375rem;font-weight:600;line-height:1.3}
.lista-numerada{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:.875rem 3rem}
.lista-numerada li{display:flex;align-items:baseline;gap:1rem;color:#2B221B;font-weight:600;line-height:1.5}
.lista-numerada__num{flex:none;font:600 .8125rem 'JetBrains Mono',monospace;color:#8A6A45}
.comparativa{overflow-x:auto}
.comparativa table{width:100%;border-collapse:collapse;line-height:1.5}
.comparativa th,.comparativa td{text-align:left;vertical-align:top;padding:1rem 1.25rem;border-bottom:.0625rem solid rgba(43,34,27,.14)}
.comparativa th:first-child{padding-left:0}
.comparativa thead th{font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#8A6A45;border-bottom:.125rem solid #2B221B}
.comparativa tbody th{width:22%;font-weight:700;color:#2B221B}
.comparativa thead th:nth-child(2),.comparativa td:nth-of-type(1){background:rgba(194,154,106,.18)}
.comparativa td:nth-of-type(1){font-weight:700;color:#2B221B}
.comparativa td:nth-of-type(2){color:#6B5A48}
.checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1rem 3rem}
.checklist li{display:flex;align-items:flex-start;gap:.75rem;color:#2B221B;line-height:1.5;font-weight:600}
.checklist li::before{content:'✓';flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;margin-top:.0625rem;border-radius:50%;background:#2B221B;color:var(--acento);font-size:.8125rem;font-weight:800}
/* Cómo trabajo, en acento, con lo que entrego: el «recorrido» (lo eligió Rafael el 30-09-2026 entre tres propuestas;
   antes, los pasos en tres columnas y los entregables en otras cuatro, con una raya encima de cada uno): los pasos en
   una línea vertical que los une, con el número en un círculo al lado del título (no encima: a Rafael no le gustan los
   rótulos encima de los encabezados; es un contador del CSS, así que no entra en el texto del encabezado), y lo que
   entrego en una tarjeta oscura al lado, con checks de acento. Vale para 3 o 4 pasos y cualquier número de
   entregables; en móvil, uno debajo de otro */
.recorrido{display:grid;gap:3rem}
@media (min-width:900px){.recorrido{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(3rem,6vw,7rem);align-items:start}}
.recorrido__pasos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;counter-reset:paso}
.recorrido__pasos li{counter-increment:paso;position:relative;display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:.625rem 1.25rem;align-items:start;padding-bottom:3rem}
.recorrido__pasos li:last-child{padding-bottom:0}
.recorrido__pasos li::before{content:counter(paso);display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:50%;background:#2B221B;color:var(--acento);font-size:1.25rem;font-weight:800;line-height:1}
.recorrido__pasos li:not(:last-child)::after{content:'';position:absolute;left:1.5625rem;top:3.75rem;bottom:.5rem;width:.125rem;border-radius:.125rem;background:rgba(43,34,27,.3)}
.recorrido__pasos h3{margin:0;min-height:3.25rem;display:flex;align-items:center;font-size:clamp(1.365rem,2.002vw,1.82rem);line-height:1.1;letter-spacing:-0.0125em;font-weight:800;text-wrap:balance}
.recorrido__pasos p{grid-column:2;margin:0;max-width:34em;font-size:1.0625rem;line-height:1.6;color:#2B221B;text-wrap:pretty}
.entregables{display:flex;flex-direction:column;gap:1.5rem;padding:clamp(1.5rem,3vw,2.5rem);border-radius:1.5rem;background:#2B221B;color:#F5EFE6}
.entregables__titulo{margin:0;font-size:clamp(1.365rem,2.002vw,1.82rem);line-height:1.1;letter-spacing:-0.0125em;font-weight:800;text-wrap:balance}
.entregables__lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.25rem}
.entregables__lista li{display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:.25rem .875rem;align-items:center}
.entregables__lista li::before{content:'✓';display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--acento);color:#2B221B;font-size:.875rem;font-weight:800}
.entregables__lista h4{margin:0;font-size:1.1875rem;line-height:1.2;letter-spacing:-0.0075em;font-weight:800}
.entregables__lista p{grid-column:2;margin:0;font-size:.9375rem;line-height:1.55;color:#E3D8CA}
/* Quién hay detrás, en oscuro. El H2, su nombre y, debajo, su papel en ese servicio, más pequeño y de acento (lo pidió
   Rafael el 30-09-2026: el nombre solo no decía de qué iba la sección); la coma, solo para el texto del encabezado */
.quien .parrafo{color:#E3D8CA}
.quien__rol{display:block;margin-top:.625rem;font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.2;letter-spacing:-0.015em;font-weight:700;color:var(--acento)}
.quien__rol::first-letter{text-transform:uppercase}
.quien__coma{position:absolute;width:.0625rem;height:.0625rem;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.quien .sobre-mi__foto{background:#3A2E24}
/* La llamada a la acción suelta, entre «Qué hace» (claro) y «Cómo trabajo» (acento): una banda oscura con el texto
   centrado, como la cita de «Sobre mí»; lleva al bloque de contacto de la página (#cta) */
.banda-cta{background:#2B221B;color:#F5EFE6;padding:clamp(3.5rem,7vw,6rem) calc(var(--margen) + var(--lado));display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem}
.banda-cta__titulo{margin:0;font-size:clamp(1.6125rem,3.096vw,2.795rem);line-height:1.05;letter-spacing:-0.015em;font-weight:800;max-width:18.6em;text-wrap:balance}
.banda-cta__texto{margin:0;font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.5;color:#E3D8CA;max-width:32em;text-wrap:balance}
.banda-cta__boton{margin-top:1rem;display:inline-flex;align-items:center;gap:.625rem;font-size:1rem;padding:1rem 1.625rem}
@media (max-width:699.98px){
  .notas li{grid-template-columns:6.25rem minmax(0,1fr);gap:.75rem}
  .comparativa thead{display:none}
  .comparativa tr{display:block;padding:1rem 0;border-bottom:.0625rem solid rgba(43,34,27,.14)}
  .comparativa th,.comparativa td,.comparativa tbody th{display:block;width:auto;border:0;padding:.25rem 0}
  .comparativa td:nth-of-type(1){margin:.25rem 0;padding:.5rem .75rem;border-radius:.625rem}
  .comparativa td::before{content:attr(data-col);display:block;margin-bottom:.25rem;font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#8A6A45}
}
/* Herramienta de GEO («¿Te recomienda ChatGPT?»): simulada, como en el diseño */
.herramienta{background:var(--acento);color:#2B221B;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,23.75rem),1fr));gap:2.5rem clamp(2rem,5vw,5rem);align-items:center;scroll-margin-top:4rem}
.herramienta__texto{display:flex;flex-direction:column;gap:1.125rem}
.titulo-herramienta{margin:0;font-size:clamp(2.15rem,4.816vw,4.945rem);line-height:.9;letter-spacing:-0.0225em;font-weight:800}
.herramienta__intro{margin:0;font-size:1.125rem;line-height:1.55;max-width:30em;text-wrap:pretty}
.herramienta__caja{background:#2B221B;color:#F5EFE6;border-radius:1.5rem;padding:clamp(1.375rem,3vw,2.25rem);display:flex;flex-direction:column;gap:1rem}
.herramienta__form{display:flex;flex-direction:column;gap:.875rem}
.herramienta__form label{display:flex;flex-direction:column;gap:.5rem;font:500 .8125rem 'JetBrains Mono',monospace}
.herramienta__form input{background:transparent;border:.09375rem solid rgba(245,239,230,.4);border-radius:.75rem;padding:.875rem 1rem;color:#F5EFE6;font-size:1.0625rem;font-family:'Nunito Sans',sans-serif;outline:none}
.herramienta__boton{margin-top:.375rem;background:var(--acento);color:#2B221B;border:0;font-weight:800;font-size:1.0625rem;padding:1rem 1.5rem;border-radius:62.4375rem;cursor:pointer}
.herramienta__resultado{display:flex;flex-direction:column;gap:.875rem}
.herramienta__para{margin:0;font:600 .75rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--acento)}
.herramienta__fila{display:flex;justify-content:space-between;gap:.75rem;padding:.75rem 0;border-bottom:.0625rem solid rgba(245,239,230,.18);font-size:1rem}
.herramienta__fila>span:last-child{font-family:'JetBrains Mono',monospace}
.herramienta__revisar{text-decoration:none;background:var(--acento);color:#2B221B;font-weight:800;font-size:1rem;padding:.875rem 1.25rem;border-radius:62.4375rem;text-align:center}
.herramienta__otro{background:none;border:0;color:#F5EFE6;text-decoration:underline;cursor:pointer;font-size:.875rem;align-self:center}

/* ---------- Fichas de caso ---------- */
.hero-caso{min-height:88vh}
.tarjeta-caso-hero{gap:1.125rem}
.titulo-caso{margin:0;font-size:clamp(2.15rem,4.3vw,4.3rem);line-height:.95;letter-spacing:-0.0175em;font-weight:800;text-wrap:balance}
/* las etiquetas de los servicios de la cabecera de los casos: fuera desde el 01-10-2026 (caso.html); quedan sus estilos */
.chips-servicio{display:flex;flex-wrap:wrap;gap:.5rem}
.chips-servicio a{text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .875rem .375rem .375rem;border:.09375rem solid rgba(245,239,230,.3);border-radius:62.4375rem;font-size:.875rem;font-weight:600}
.chips-servicio a>span{width:1.75rem;height:1.75rem;border-radius:50%;background:var(--acento);display:flex;align-items:center;justify-content:center}
.chips-servicio img{display:block;width:1rem;height:1rem}
.hero-caso__botones{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:.25rem}
/* garciabriz: el H1 de la ficha, el sector (tools/textos_casos.py): se ve como el principio de la entradilla, debajo del
   nombre del cliente (un párrafo con el aspecto del H1 del diseño), que sigue siendo lo que destaca; la entradilla sigue
   sin hueco (anula el gap de la tarjeta) */
.titulo-caso-sector{margin:0;font-size:1.1875rem;line-height:1.5;letter-spacing:normal;font-weight:500;text-wrap:pretty}
.entradilla--sigue{margin-top:-1.125rem}
/* garciabriz: el cuerpo del proyecto, en dos columnas (lo pidió Rafael el 01-10-2026: la captura tenía demasiado
   protagonismo): a la izquierda la captura, «Ver la web» y la ficha (etiqueta y dato, como las notas de los servicios, en
   claro); a la derecha el texto del sector (tools/textos_casos.py) o el hueco del diseño. Con la misma rejilla que la
   cabecera de la sección (.proyecto__cabeza), para que el texto empiece donde la entradilla y la captura donde el título
   (con 5/12 y 7/12 no cuadraban: lo vio Rafael); en una columna cuando no caben dos */
.proyecto__cuerpo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:2.5rem clamp(2rem,6vw,6rem);align-items:start}
.proyecto__lado{display:flex;flex-direction:column;gap:1.5rem}
/* la columna de la captura y la ficha, fija al bajar mientras se lee el texto (lo pidió Rafael el 01-10-2026), como «Mi
   historia» de «Sobre mí»: solo en escritorio y si cabe entera en el alto de la ventana */
@media (min-width:900px) and (min-height:800px){.proyecto__lado{position:sticky;top:6.875rem}}
.proyecto__huecos{display:flex;flex-direction:column;gap:1rem}
.ficha-caso{margin:0;display:flex;flex-direction:column}
.ficha-caso>div{display:grid;grid-template-columns:6.25rem minmax(0,1fr);gap:.75rem;align-items:baseline;padding:.75rem 0;border-top:.0625rem solid rgba(43,34,27,.14)}
.ficha-caso>div:first-child{border-top:0;padding-top:0}
.ficha-caso dt{font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#8A6A45}
.ficha-caso dd{margin:0;font-size:1rem;line-height:1.55;color:#3A2E24}
.proyecto__cuerpo .texto-seo>h3:first-child{margin-top:0}
.proyecto__cuerpo .texto-seo p,.proyecto__cuerpo .texto-seo ul{color:#4A3B2E}
.proyecto{display:flex;flex-direction:column;gap:3rem;scroll-margin-top:4.5rem}
.proyecto__cabeza{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:2rem clamp(2rem,6vw,6rem);align-items:end}
.proyecto__texto{margin:0;font-size:1.125rem;line-height:1.6;color:#4A3B2E;text-wrap:pretty}
.maqueta{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;align-items:end;max-width:68.75rem}
.navegador{border-radius:1.125rem;overflow:hidden;background:#FFFFFF;box-shadow:0 1.875rem 4.375rem -1.875rem rgba(43,34,27,.45)}
.navegador__barra{height:2.25rem;background:#ECE6DB;display:flex;align-items:center;gap:.4375rem;padding:0 .875rem}
.navegador__barra>span{width:.625rem;height:.625rem;border-radius:50%;background:#C9BBA3}
.navegador__barra>.navegador__dominio{width:auto;height:auto;border-radius:0;background:none;margin-left:.75rem;font:500 .75rem 'JetBrains Mono',monospace;color:#5A4838}
/* El pantallazo era un <image-slot> del diseño: encuadre «cover» centrado sobre un
   fondo gris muy suave mientras carga, y su borde discontinuo encima */
.navegador__pantalla{aspect-ratio:16/10;position:relative;background:rgba(127,127,127,.08)}
.navegador__pantalla img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* El borde discontinuo del image-slot: en Claude Design se queda pintado sobre la imagen
   (el runtime le quita el atributo data-filled al repintar), así que se ve siempre */
.navegador__anillo{position:absolute;inset:0;pointer-events:none;border:.09375rem dashed currentColor;opacity:.35}
.que-hice{display:flex;flex-direction:column;gap:3rem}
.rejilla-que{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:2.25rem 1.75rem}
.que-item{text-decoration:none;border-top:.125rem solid #2B221B;padding-top:1.125rem;display:flex;flex-direction:column;gap:.75rem}
.que-item>span{width:2.75rem;height:2.75rem;border-radius:.75rem;background:var(--acento);display:flex;align-items:center;justify-content:center}
.que-item img{display:block;width:1.5rem;height:1.5rem}
.que-item h3{margin:0;font-size:1.3062rem;line-height:1.15;letter-spacing:-0.0075em;font-weight:800}
.que-item p{margin:0;font-size:1rem;line-height:1.6;color:#4A3B2E;text-wrap:pretty}
.resultados{display:flex;flex-direction:column;gap:3rem}
.resultados__cabeza{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.75rem 1.5rem}
.insignia-ejemplo{font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;border:.09375rem dashed rgba(245,239,230,.4);border-radius:62.4375rem;padding:.375rem .75rem}
.insignia-ejemplo--peq{padding:.25rem .625rem}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13.75rem),1fr));gap:2.25rem 1.75rem}
.cifras>div{border-top:.09375rem solid rgba(245,239,230,.25);padding-top:1.125rem;display:flex;flex-direction:column;gap:.5rem}
.cifras__n{font-size:clamp(2.365rem,4.3vw,4.085rem);line-height:1;letter-spacing:-0.0175em;font-weight:800;color:var(--acento)}
.cifras__l{font-size:1.0625rem;line-height:1.45;color:#E3D8CA}
.testimonio{margin:1.5rem 0 0;max-width:56.25rem;display:flex;flex-direction:column;gap:1.125rem}
.testimonio blockquote{margin:0;font-size:clamp(1.5rem,2.6vw,2.375rem);line-height:1.25;letter-spacing:-0.015em;font-weight:700;text-wrap:pretty}
.testimonio figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:.625rem .875rem;font-size:.9375rem;color:#E3D8CA}
.testimonio__nombre{font-weight:700;color:#F5EFE6}
/* «Ver la web»: sube sobre el final de la sección anterior (margen negativo del diseño) */
/* garciabriz: la captura entera lleva a la web (al pasar el ratón, se acerca un poco) y «Ver la web» va justo debajo, en el
   marrón de los botones principales, a tamaño medio y con sombra (lo pidió Rafael el 01-10-2026: en el diseño, una
   pastilla grande suelta después de «Qué hice»; probó también una más pesada bajo la captura, una pequeña en la barra del
   navegador, que se veía poco, y otra flotando sobre la imagen) */
a.navegador__pantalla{display:block;text-decoration:none;overflow:hidden}
a.navegador__pantalla img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
a.navegador__pantalla:hover img{transform:scale(1.025)}
.ver-web{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;background:#5A4838;color:#FFFFFF;font-weight:700;font-size:1rem;line-height:1;padding:.9375rem 1.5rem;border-radius:62.4375rem;box-shadow:0 .75rem 1.5rem -.75rem rgba(43,34,27,.6);transition:background .2s,transform .2s}
.ver-web:hover{background:#4A3B2E!important;transform:translateY(-.0625rem)}

/* ---------- Sobre mí ---------- */
.cita{background:#C79A6B;color:#2B221B;padding:clamp(2.25rem,4.5vw,3.75rem) calc(var(--margen) + var(--lado));display:flex;flex-direction:column;align-items:center;text-align:center;gap:.875rem;overflow:hidden}
.cita__texto{margin:0;font-size:clamp(1.365rem,2.548vw,2.3887rem);line-height:1.1;letter-spacing:-0.0125em;font-weight:800;max-width:19.78em;text-wrap:balance}
.cita__autor{display:flex;align-items:center;gap:.875rem}
.cita__autor>span{width:2.25rem;height:.125rem;background:#2B221B}
.cita__autor p{margin:0;font:600 .8125rem 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
.conoceme{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,21.25rem),1fr));gap:3rem clamp(2rem,6vw,6rem);align-items:start;scroll-margin-top:4.5rem}
.conoceme__lateral{display:flex;flex-direction:column;gap:1.5rem;position:sticky;top:6.875rem}
.conoceme__foto{aspect-ratio:1 / 1;max-width:26.25rem;width:100%;border-radius:1.5rem;overflow:hidden;background:#E6DCCD}
.conoceme__foto img{width:100%;height:100%;object-fit:cover;display:block}
.conoceme__texto{display:flex;flex-direction:column;gap:1.375rem;max-width:40rem}
.conoceme__texto p{margin:0;font-size:1.125rem;line-height:1.7;color:#4A3B2E;text-wrap:pretty}
/* garciabriz: negritas en lo que hay que leer de un vistazo (lo pidió Rafael el 02-10-2026), en el negro de los titulares */
.conoceme__texto strong{font-weight:700;color:#2B221B}
.enlace-texto{color:#2B221B;font-weight:600;text-decoration:underline;text-underline-offset:.1875rem}
.lenguajes{display:flex;flex-direction:column;gap:2.25rem}
.titulo-lenguajes{margin:0;font-size:clamp(1.505rem,2.924vw,2.795rem);line-height:1;letter-spacing:-0.015em;font-weight:800;max-width:25.58em;text-wrap:balance}
.lenguajes__lista{display:flex;flex-wrap:wrap;gap:.625rem;list-style:none;margin:0;padding:0}
.lenguajes__lista>li{font:500 .9375rem 'JetBrains Mono',monospace;padding:.625rem 1rem;border:.09375rem solid #2B221B;border-radius:62.4375rem}
/* garciabriz: los ámbitos que domina (antes, la lista de lenguajes de 2015), uno por servicio, con su icono, su nombre y su
   frase (la del menú). En tarjetas desde el 02-10-2026 (lo eligió Rafael entre tres: en una lista de una columna sobraba
   media pantalla a la derecha), blancas como las de los casos, cuatro por fila en escritorio, dos en tableta y una en
   móvil; toda la tarjeta enlaza a su servicio (el enlace es el nombre, que se estira sobre ella). La octava, la de
   contacto del menú de escritorio (.mega__destacado), más grande, con el personaje que señala */
.ambitos{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.ambitos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.ambitos{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ambito{position:relative;display:flex;flex-direction:column;gap:.875rem;padding:1.5rem;border-radius:1.375rem;background:#FFFFFF;box-shadow:0 1.5rem 3.75rem -2.25rem rgba(43,34,27,.5);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.ambito:hover{transform:translateY(-.25rem)}
.ambito:has(a:focus-visible){outline:.125rem solid #5A4838;outline-offset:.1875rem}
.ambito__titulo{margin:0;display:flex;align-items:center;gap:.875rem;font-size:1.1875rem;line-height:1.15;letter-spacing:-0.0075em;font-weight:800}
.ambito__titulo a{color:inherit;text-decoration:none;outline:none}
.ambito__titulo a:hover{opacity:1}
.ambito__titulo a::after{content:'';position:absolute;inset:0;border-radius:inherit}
.ambito__texto{margin:0;font-size:1rem;line-height:1.55;color:#4A3B2E;text-wrap:pretty}
.ambito__mas{margin-top:auto;padding-top:.25rem;font-weight:700;font-size:.9375rem;color:#5A4838}
.ambito__mas::after{content:'→';display:inline-block;margin-left:.5rem;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.ambito:hover .ambito__mas::after{transform:translateX(.25rem)}
.ambitos-contacto{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.5rem;min-height:13rem;padding:1.5rem 9rem 1.5rem 1.5rem;border-radius:1.375rem;background:#5A4838;color:#FFFFFF;text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.ambitos-contacto:hover{opacity:1;transform:translateY(-.25rem);box-shadow:0 1.5rem 3rem -1.5rem rgba(43,34,27,.7)}
.ambitos-contacto__titulo{font-weight:800;font-size:1.3062rem;line-height:1.15;letter-spacing:-0.0075em}
.ambitos-contacto__texto{font-size:1rem;line-height:1.5;opacity:.88;text-wrap:pretty}
.ambitos-contacto__cta{margin-top:auto;padding-top:.75rem;font-weight:700;font-size:1rem}
.ambitos-contacto__cta::after{content:'→';display:inline-block;margin-left:.5rem;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.ambitos-contacto:hover .ambitos-contacto__cta::after{transform:translateX(.25rem)}
.ambitos-contacto__personaje{position:absolute;right:.75rem;bottom:-5.6rem;height:16.5rem;width:auto;pointer-events:none}
@media (min-width:1100px){.ambitos-contacto{padding-right:7.5rem}.ambitos-contacto__personaje{height:14.5rem;bottom:-5rem;right:.25rem}}

/* ---------- Contacto ---------- */
/* más aire arriba (lo pidió Rafael; en el diseño, 112 px: 40 bajo la cabecera, y el 02-10-2026 un poco más:
   hasta 192 px), según el alto de la ventana para que en las bajas no baje el formulario */
.hero-contacto{min-height:100vh;box-sizing:border-box;padding:clamp(7rem,17vh,12rem) calc(var(--margen) + var(--lado)) 4rem;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:2.5rem clamp(2rem,5vw,5rem);align-items:start}
.contacto__columna{order:1;display:flex;flex-direction:column;gap:1.125rem;min-width:0;scroll-margin-top:5.5rem}
.contacto__hueco{order:2}
.titulo-contacto{margin:0;font-size:clamp(2.15rem,3.956vw,4.085rem);line-height:.92;letter-spacing:-0.02em;font-weight:800;text-wrap:balance}
.contacto__intro{margin:0;font-size:1.125rem;line-height:1.5;font-weight:500;text-wrap:pretty;max-width:30em}
.contacto__tarjeta{background:#F5EFE6;color:#2B221B;border-radius:1.5rem;padding:clamp(1.25rem,2.6vw,2rem);box-shadow:0 1.875rem 5rem -1.875rem rgba(0,0,0,.6);margin-top:.375rem}
.contacto__acciones{align-items:center;gap:.75rem 1.125rem}
.boton-enviar--ancho{padding:.9375rem 1.625rem}
.contacto__nota{font:500 .75rem 'JetBrains Mono',monospace;color:#5A4838}
.contacto__directo{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.75rem;margin-top:.375rem}
.contacto__dato{text-decoration:none;display:flex;align-items:center;gap:.75rem}
.contacto__dato:hover{opacity:1!important}
.contacto__dato>span:first-child{width:2.5rem;height:2.5rem;flex:none;border-radius:.75rem;background:var(--acento);display:flex;align-items:center;justify-content:center}
.contacto__dato svg{display:block;width:1.25rem;height:1.25rem}
.contacto__dato>span:last-child{font-size:clamp(1.125rem,1.7vw,1.5rem);font-weight:800;letter-spacing:-0.02em}
.faq-contacto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22.5rem),1fr));gap:2.5rem clamp(2rem,6vw,6rem);align-items:start}
.faq-contacto__lista{display:flex;flex-direction:column}
.faq-contacto__item{border-bottom:0;border-top:.09375rem solid rgba(43,34,27,.2)}
.faq-contacto__boton{gap:1.25rem;padding:1.375rem 0;font-family:inherit;font-size:1.1875rem;font-weight:700;line-height:normal;letter-spacing:-0.005em}
.faq-contacto__mas{font-size:1.625rem;transition:transform .2s}
.faq-contacto__respuesta{margin:0 0 1.5rem;font-size:1.0625rem;line-height:1.6;color:#4A3B2E}

/* ---------- Índices sin escena: Casos y Blog (main con fondo crema) ---------- */
.main--crema{background:#F5EFE6;color:#2B221B}
.indice__cabeza{padding:clamp(8.125rem,14vw,11.875rem) calc(var(--margen) + var(--lado)) 2.5rem;display:flex;flex-direction:column;gap:1.375rem}
/* garciabriz: el título de Casos y de Blog, de 5,5rem como mucho (lo pidió Rafael el 02-10-2026; en el diseño, hasta 6,5rem):
   88 px desde unos 1375 px de ancho; por debajo, la misma escala de antes (6,4vw) */
.titulo-indice{margin:0;font-size:clamp(2.365rem,5.504vw,4.73rem);line-height:.92;letter-spacing:-0.02em;font-weight:800;max-width:15.12em;text-wrap:balance}
.indice__intro{margin:0;font-size:1.1875rem;line-height:1.55;max-width:36em;color:#4A3B2E;text-wrap:pretty}
.indice__listado{padding:0 calc(var(--margen) + var(--lado)) clamp(5.5rem,11vw,10rem);display:flex;flex-direction:column;gap:2.25rem}
.filtros{display:flex;flex-wrap:wrap;gap:.5rem;padding-bottom:1.375rem;border-bottom:.0625rem solid rgba(43,34,27,.14)}
.filtros button{font-size:.875rem;font-weight:600;padding:.5625rem .9375rem;border-radius:62.4375rem;border:.09375rem solid #2B221B;cursor:pointer;background:transparent;color:#2B221B}
.filtros button[aria-selected="true"]{background:#2B221B;color:#F5EFE6}
.indice__vacio{margin:0;font-size:1.0625rem;color:#4A3B2E}
.indice__nota{margin:0;font:500 .75rem 'JetBrains Mono',monospace;color:#6B5A48}

/* ---------- Hueco de imagen vacío (el <image-slot> sin imagen del diseño) ---------- */
.hueco-imagen{display:block;position:relative;font:.8125rem/1.3 system-ui,-apple-system,sans-serif;width:100%;height:100%;aspect-ratio:3/2}
.hueco-imagen__marco{position:absolute;inset:0;overflow:hidden;background:rgba(127,127,127,.08)}
.hueco-imagen__vacio{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;text-align:center;padding:.75rem;box-sizing:border-box;cursor:pointer;user-select:none}
.hueco-imagen__vacio svg{opacity:.45;width:1.75rem;height:1.75rem}
.hueco-imagen__texto{max-width:90%;font-weight:500;letter-spacing:.01em;opacity:.75}
.hueco-imagen__anillo{position:absolute;inset:0;pointer-events:none;border:.09375rem dashed currentColor;opacity:.35}
.hueco-imagen--circulo .hueco-imagen__marco,.hueco-imagen--circulo .hueco-imagen__anillo{border-radius:50%}

/* ---------- Blog ---------- */
.titulo-indice--blog{max-width:16.28em}
/* garciabriz: el texto de presentación del blog, tan ancho como el H1 (lo pidió Rafael el 01-10-2026: en 36em quedaba mucho
   más estrecho). El H1 mide unas 10 veces su letra, clamp(2.75rem, 6.4vw, 5.5rem) */
.indice__intro--blog{max-width:clamp(27.5rem,64vw,55.625rem)}
.destacado-seccion{padding:0 calc(var(--margen) + var(--lado)) 3.5rem}
.destacado{text-decoration:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,23.75rem),1fr));gap:0;border-radius:1.5rem;overflow:hidden;background:#FFFFFF;box-shadow:0 1.875rem 4.375rem -2.5rem rgba(43,34,27,.45)}
.destacado:hover{opacity:1!important}
.destacado__imagen{position:relative;min-height:20rem;background:#EDE4D6}
.destacado__cuerpo{padding:clamp(1.5rem,3.5vw,3rem);display:flex;flex-direction:column;gap:1rem;justify-content:center}
.destacado__etiquetas{display:flex;gap:.625rem;align-items:center;font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.destacado__etiquetas>span:first-child{background:var(--acento);color:#2B221B;padding:.25rem .625rem;border-radius:62.4375rem}
.destacado__etiquetas>span:last-child{color:#8A6A45}
.destacado h2{margin:0;font-size:clamp(1.6125rem,2.924vw,2.6875rem);line-height:1;letter-spacing:-0.015em;font-weight:800;text-wrap:balance}
.destacado p{margin:0;font-size:1.0625rem;line-height:1.6;color:#4A3B2E;text-wrap:pretty}
.destacado__meta{display:flex;gap:.875rem;flex-wrap:wrap;align-items:center;font:500 .75rem 'JetBrains Mono',monospace;color:#6B5A48}
.destacado__leer{align-self:flex-start;display:inline-flex;gap:.625rem;align-items:center;background:#2B221B;color:#F5EFE6;font-weight:700;font-size:.9375rem;padding:.8125rem 1.25rem;border-radius:62.4375rem;margin-top:.375rem}
.rejilla-articulos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,18.75rem),1fr));gap:1.75rem}
/* garciabriz: el listado del blog, en cuatro columnas en escritorio (lo pidió Rafael el 01-10-2026; en el diseño, las que
   cupieran de 300 px: tres en casi todas las pantallas) */
@media (min-width:1100px){.rejilla-articulos--blog{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* garciabriz: las tarjetas de los artículos (el listado, «Sigue leyendo» y, desde el 02-10-2026, la portada), con el aspecto de las de los casos (lo pidió
   Rafael el 01-10-2026; en el diseño, la imagen suelta, con las esquinas redondeadas, y el texto debajo, sobre el fondo):
   blancas, con sombra, la imagen de lado a lado arriba, el texto dentro y, abajo, la fecha y «Leer artículo →». Por eso
   el hueco entre tarjetas, el de la rejilla de los casos (en el diseño, 3rem entre filas; 2,5 en «Sigue leyendo») */
.articulo-tarjeta{text-decoration:none;color:#2B221B;display:flex;flex-direction:column;border-radius:1.375rem;overflow:hidden;background:#FFFFFF;box-shadow:0 1.5rem 3.75rem -2.25rem rgba(43,34,27,.5);transition:transform .25s}
.articulo-tarjeta:hover{transform:translateY(-.25rem)!important;opacity:1!important}
.articulo-tarjeta__imagen{aspect-ratio:16/10;overflow:hidden;position:relative;background:#EDE4D6}
.articulo-tarjeta__cuerpo{padding:1.375rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.75rem;flex:1}
.articulo-tarjeta__pie{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-top:auto;padding-top:.375rem}
.articulo-tarjeta__leer{font-weight:700;font-size:.9375rem;display:inline-flex;gap:.5rem;align-items:center;white-space:nowrap}
.articulo-tarjeta__meta{display:flex;gap:.625rem;align-items:center;font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.articulo-tarjeta__meta>span:nth-child(1){color:#8A6A45}
.articulo-tarjeta__meta>span:nth-child(2){opacity:.6}
.articulo-tarjeta__meta>span:nth-child(3){opacity:.75}
.articulo-tarjeta__extracto{margin:0;font-size:.9375rem;line-height:1.6;color:#4A3B2E;text-wrap:pretty}
.articulo-tarjeta__fecha{font:500 .75rem 'JetBrains Mono',monospace;color:#6B5A48}
.paginacion{display:flex;gap:.5rem;justify-content:center;margin-top:.75rem;font-weight:700}
.paginacion>span{width:2.625rem;height:2.625rem;border-radius:50%;background:#2B221B;color:#F5EFE6;display:flex;align-items:center;justify-content:center}
.paginacion>a{text-decoration:none;width:2.625rem;height:2.625rem;border-radius:50%;border:.09375rem solid #2B221B;display:flex;align-items:center;justify-content:center}
/* garciabriz: «Anterior» y «Siguiente», en píldora (en el diseño, solo «Siguiente»: la paginación era estática) */
.paginacion>a.paginacion__paso{width:auto;height:2.625rem;padding:0 1.125rem;border-radius:62.4375rem}

/* ---------- Artículo del blog ---------- */
.articulo__cabeza{padding:clamp(7.5rem,13vw,10.625rem) calc(var(--margen) + var(--lado)) 2.25rem;display:flex;flex-direction:column;gap:1.375rem;max-width:68.75rem}
.migas{display:flex;gap:.5rem;font:500 .8125rem 'JetBrains Mono',monospace;color:#6B5A48}
.migas a{text-decoration:none}
.migas>span:last-child{color:#8A6A45}
.titulo-articulo{margin:0;font-size:clamp(2.15rem,4.816vw,4.73rem);line-height:.95;letter-spacing:-0.02em;font-weight:800;text-wrap:balance}
.articulo__entradilla{margin:0;font-size:1.3125rem;line-height:1.5;max-width:34em;color:#4A3B2E;text-wrap:pretty}
.articulo__autor{display:flex;align-items:center;gap:.875rem;flex-wrap:wrap}
.articulo__foto{width:3rem;height:3rem;border-radius:50%;overflow:hidden;position:relative;background:#EDE4D6}
.articulo__firma{display:flex;flex-direction:column;gap:.125rem}
.articulo__firma>span:first-child{font-weight:700;font-size:1rem}
.articulo__firma>span:last-child{font:500 .75rem 'JetBrains Mono',monospace;color:#6B5A48}
.articulo__portada-caja{padding:0 calc(var(--margen) + var(--lado)) 3rem}
.articulo__portada{aspect-ratio:21/9;border-radius:1.5rem;overflow:hidden;position:relative;background:#EDE4D6}
.articulo__contenido{padding:0 calc(var(--margen) + var(--lado)) clamp(4.5rem,9vw,7.5rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:3rem clamp(2rem,5vw,5rem);align-items:start}
.indice-articulo{position:sticky;top:6rem;display:flex;flex-direction:column;gap:.875rem;max-width:17.5rem}
.indice-articulo>span{font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#6B5A48}
.indice-articulo ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.625rem;border-left:.125rem solid rgba(43,34,27,.14)}
.indice-articulo a{text-decoration:none;display:block;padding:.125rem 0 .125rem .875rem;margin-left:-.125rem;border-left:.125rem solid transparent;font-size:.9375rem;font-weight:500}
.indice-articulo a.activo{border-left-color:var(--acento);font-weight:700}
.articulo{grid-column:span 3;max-width:46.25rem;display:flex;flex-direction:column;gap:1.375rem}
.articulo>p{margin:0;font-size:1.125rem;line-height:1.75;color:#3A2E24;text-wrap:pretty}
.articulo>h2{margin:1.5rem 0 0;font-size:clamp(1.5925rem,2.366vw,2.1612rem);line-height:1.08;letter-spacing:-0.0125em;font-weight:800;scroll-margin-top:6rem;text-wrap:balance}
.articulo>ul{margin:0;padding-left:1.375rem;display:flex;flex-direction:column;gap:.625rem;font-size:1.125rem;line-height:1.65;color:#3A2E24}
.articulo>blockquote{margin:.75rem 0;padding:1.375rem 1.625rem;border-radius:1.125rem;background:#2B221B;color:#F5EFE6;font-size:1.375rem;line-height:1.4;font-weight:700;letter-spacing:-0.01em}
.articulo__destacado{border-radius:1.125rem;padding:1.375rem 1.5rem;background:#EDE4D6;border:.09375rem solid rgba(43,34,27,.14);display:flex;flex-direction:column;gap:.625rem}
.articulo__destacado>span{font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#8A6A45}
.articulo__destacado>p{margin:0;font-size:1.0625rem;line-height:1.6}
.articulo__hueco{border:.09375rem dashed rgba(43,34,27,.35);border-radius:.875rem;padding:1.125rem 1.25rem;display:flex;flex-direction:column;gap:.5rem}
.articulo__hueco>span{font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.articulo__hueco>p{margin:0;font-size:1rem;line-height:1.6}
/* garciabriz: los artículos propios del blog (src/plantillas/articulo.html, tools/articulos.py; lo pidió Rafael el
   30-09-2026). Sobre los estilos del artículo del diseño: la firma enlaza a «Sobre mí»; la portada, la animación del
   artículo (un vídeo sobre el fondo oscuro de las escenas, con su fotograma fijo debajo; en móvil, 4:3, porque a 21:9 no se
   vería); H3, listas numeradas, enlaces, tablas (en móvil, una ficha por fila), figuras con pie, una llamada oscura a
   mitad y las preguntas frecuentes en el acordeón de la web */
.articulo__firma>a{font-weight:700;font-size:1rem;text-decoration:none}
.articulo__firma>a:hover{text-decoration:underline;text-underline-offset:.1875rem}
.articulo__portada--animada{background:#2B221B;aspect-ratio:5/2}
.articulo__portada--animada img,.articulo__portada-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* el vídeo, un píxel por dentro de su fotograma fijo: el LCP es el fotograma fijo, que se ve enseguida (si ocupan lo
   mismo, Chrome toma como LCP el primer fotograma del vídeo, que en un móvil lento llega segundos después) */
.articulo__portada-video{inset:1px;width:calc(100% - 2px);height:calc(100% - 2px)}
.articulo__portada-video{opacity:0;transition:opacity .45s ease}
.articulo__portada-video.reproduciendo{opacity:1}
.articulo__portada.con-video picture{visibility:hidden}
@media (max-width:699.98px){.articulo__portada--animada{aspect-ratio:4/3}}
.articulo>h3{margin:.75rem 0 0;font-size:clamp(1.1875rem,1.71vw,1.425rem);line-height:1.2;letter-spacing:-0.0075em;font-weight:800;scroll-margin-top:6rem;text-wrap:balance}
.articulo>ol{margin:0;padding-left:1.5rem;display:flex;flex-direction:column;gap:.75rem;font-size:1.125rem;line-height:1.65;color:#3A2E24}
.articulo>ol>li::marker{font-weight:800;color:#8A6A45}
.articulo>p a,.articulo>ul a,.articulo>ol a,.articulo td a,.articulo__faq a{color:inherit;text-decoration:underline;text-decoration-color:var(--acento);text-decoration-thickness:.125rem;text-underline-offset:.1875rem}
.articulo code{font:500 .9em 'JetBrains Mono',monospace;background:#EDE4D6;border-radius:.375rem;padding:.0625rem .375rem}
.articulo>table{border-collapse:collapse;width:100%;margin:.5rem 0;font-size:1rem;line-height:1.55;color:#3A2E24}
.articulo>table caption{caption-side:top;text-align:left;padding-bottom:.75rem;font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#8A6A45}
.articulo>table th,.articulo>table td{text-align:left;vertical-align:top;padding:.875rem .875rem .875rem 0;border-bottom:.0625rem solid rgba(43,34,27,.14)}
.articulo>table thead th{font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#6B5A48;border-bottom-color:rgba(43,34,27,.3)}
.articulo>table tbody th{font-weight:700;color:#2B221B;width:32%}
@media (max-width:635.98px){.articulo>table caption{display:block;width:auto}.articulo>table thead{display:none}.articulo>table,.articulo>table tbody,.articulo>table tr,.articulo>table th,.articulo>table td{display:block;width:auto}.articulo>table tr{padding:.75rem 0;border-bottom:.0625rem solid rgba(43,34,27,.14)}.articulo>table th,.articulo>table td{padding:.25rem 0;border:0}.articulo>table tbody th{width:auto;font-size:1.0625rem}.articulo>table td::before{content:attr(data-etiqueta);display:block;margin-bottom:.125rem;font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#8A6A45}}
.articulo__figura{margin:.75rem 0;display:flex;flex-direction:column;gap:.75rem}
.articulo__figura img{width:100%;height:auto;display:block;border-radius:1.125rem;background:#EDE4D6}
.articulo__figura figcaption{font-size:.9375rem;line-height:1.5;color:#6B5A48;text-wrap:pretty}
.articulo__llamada{margin:1rem 0;padding:clamp(1.75rem,3.5vw,2.5rem);border-radius:1.5rem;background:#2B221B;color:#F5EFE6;display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
.articulo__llamada-titulo{margin:0;font-size:clamp(1.365rem,2.184vw,1.82rem);line-height:1.1;letter-spacing:-0.0125em;font-weight:800;text-wrap:balance}
.articulo__llamada-texto{margin:0;font-size:1.0625rem;line-height:1.55;color:#E3D8CA;text-wrap:pretty}
.articulo__llamada-boton{margin-top:.5rem;display:inline-flex;align-items:center;gap:.625rem;font-size:1rem;padding:.9375rem 1.5rem}
.articulo__faq{margin-top:-.25rem}
/* «Sigue leyendo», en móvil y en tableta estrecha, en slides como los de la portada (lo pidió Rafael): los mismos valores
   que .fila-slides (asoma parte de la siguiente tarjeta); en escritorio, la rejilla del diseño */
@media (max-width:899.98px){
  .rejilla-articulos--relacionados{--v:calc(100vw - 2 * var(--margen) - var(--lado));display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((var(--v) - 1rem) / 1.2);gap:1rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--lado));padding:.5rem var(--lado) 1.625rem;scroll-padding-inline:var(--lado);scrollbar-width:none}
  .rejilla-articulos--relacionados::-webkit-scrollbar{display:none}
  .rejilla-articulos--relacionados>*{scroll-snap-align:start}
}
@media (min-width:700px) and (max-width:899.98px){.rejilla-articulos--relacionados{grid-auto-columns:calc((var(--v) - 2rem) / 2.4)}}
/* garciabriz: las tarjetas de los artículos en slides (la portada y, en móvil, «Sigue leyendo»): la fila recorta lo que
   sale de ella (con overflow-x:auto también recorta en vertical) y la sombra de la tarjeta, que se desvanece unos 3rem
   por debajo, se cortaba en seco a 1,625rem (lo vio Rafael el 02-10-2026). Más relleno abajo y el mismo margen negativo,
   para no mover nada */
#blog-fila{padding-bottom:3.25rem;margin-bottom:-1.625rem}
@media (max-width:899.98px){.rejilla-articulos--relacionados{padding-bottom:3.25rem;margin-bottom:-1.625rem}}
/* las tarjetas de los artículos propios (el blog, la portada y «Sigue leyendo»), con un fotograma de su animación (las
   de la portada, desde el 02-10-2026, las mismas del blog: .articulo-tarjeta) */
.destacado__imagen>img,.articulo-tarjeta__imagen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* «Sigue leyendo» y los títulos de sus tarjetas, sin ser encabezados (no son parte del artículo), con el mismo aspecto */
.relacionados__titulo{margin:0;font-size:clamp(1.6125rem,3.096vw,3.01rem);line-height:1;letter-spacing:-0.015em;font-weight:800}
.articulo-tarjeta__titulo{margin:0;font-size:1.3062rem;line-height:1.15;letter-spacing:-0.0075em;font-weight:800;text-wrap:balance}
/* el índice: que se note en qué apartado estás (lo pidió Rafael). Lo leído, con la raya del color de la marca, como una
   barra de progreso; el apartado actual, resaltado; lo que queda, más apagado. En móvil, plegado (se abre al tocar) */
.indice-articulo__plegable>summary{list-style:none;font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#6B5A48;margin-bottom:.875rem}
.indice-articulo__plegable>summary::-webkit-details-marker{display:none}
.indice-articulo ol{gap:0}
.indice-articulo a{padding:.375rem .75rem .375rem .875rem;color:#8A7A66;border-left-width:.1875rem;transition:color .2s,background-color .2s,border-color .2s}
.indice-articulo a.leido{color:#4A3B2E;border-left-color:rgba(194,154,106,.55)}
.indice-articulo a.activo{color:#2B221B;font-weight:700;border-left-color:var(--acento);background:rgba(194,154,106,.2);border-radius:0 .5rem .5rem 0}
@media (min-width:900px){.indice-articulo__plegable>summary{pointer-events:none}}
@media (max-width:899.98px){
  .indice-articulo__plegable{border:.09375rem solid rgba(43,34,27,.18);border-radius:1rem;padding:0 1rem;background:#FAF6EF}
  .indice-articulo__plegable>summary{margin:0;padding:1rem 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:.75rem;color:#2B221B}
  .indice-articulo__plegable>summary::after{content:'';width:.5rem;height:.5rem;border-right:.125rem solid currentColor;border-bottom:.125rem solid currentColor;transform:rotate(45deg) translateY(-.125rem);transition:transform .2s}
  .indice-articulo__plegable[open]>summary::after{transform:rotate(-135deg) translateY(-.125rem)}
  .indice-articulo__plegable[open]>ol{margin-bottom:1rem}
}
/* el artículo, a todo el ancho de su columna (lo pidió Rafael el 30-09-2026): a la izquierda, el índice (la navegación),
   fijo al bajar; a la derecha, arriba la animación y debajo el texto (en el diseño, la portada ocupaba todo el ancho,
   encima de las dos columnas, y el texto se quedaba en 740 px). En una columna (móvil y tableta estrecha): la animación,
   el índice y el texto */
.articulo__contenido--ancho{grid-template-columns:minmax(0,1fr);row-gap:2.5rem}
.articulo__contenido--ancho>.articulo__portada-caja{padding:0}
.articulo__contenido--ancho>.articulo{grid-column:auto;max-width:none}
@media (min-width:900px){
  .articulo__contenido--ancho{grid-template-columns:minmax(12rem,15rem) minmax(0,1fr)}
  .articulo__contenido--ancho>.articulo__portada-caja{grid-column:2;grid-row:1}
  .articulo__contenido--ancho>.indice-articulo{grid-column:1;grid-row:1/span 2}
  .articulo__contenido--ancho>.articulo{grid-column:2;grid-row:2}
}
.caja-autor__texto>span:first-child>a{color:inherit;text-decoration:none}
.caja-autor__texto>span:first-child>a:hover{text-decoration:underline;text-underline-offset:.1875rem}
/* garciabriz: páginas legales (lo pidió Rafael: sencillas, sin escena). El texto, con la tipografía del artículo del blog */
.legal-pagina{padding:0 calc(var(--margen) + var(--lado)) clamp(4.5rem,9vw,7.5rem)}
.legal-pagina .articulo{max-width:none} /* garciabriz: a todo el ancho (lo pidió Rafael; el artículo del blog, a 740 px) */
.legal__fecha{margin:0;font:500 .8125rem 'JetBrains Mono',monospace;color:#6B5A48}
.legal-pagina .articulo a{color:inherit;text-decoration:underline;text-underline-offset:.1875rem}
.legal-pagina .articulo code{font:500 .9em 'JetBrains Mono',monospace}
.legal-tabla code{white-space:nowrap}
.legal-tabla{overflow-x:auto}
.legal-tabla table{border-collapse:collapse;width:100%;min-width:35rem;font-size:.9375rem;line-height:1.5;color:#3A2E24}
.legal-tabla th,.legal-tabla td{text-align:left;vertical-align:top;padding:.625rem .75rem;border-bottom:.0625rem solid rgba(43,34,27,.14)}
.legal-tabla th{font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#8A6A45}
@media (max-width:635.98px){.legal-tabla table{min-width:0}.legal-tabla thead{display:none}.legal-tabla table,.legal-tabla tbody,.legal-tabla tr,.legal-tabla td{display:block;width:auto}.legal-tabla tr{border-top:.0625rem solid rgba(43,34,27,.14);border-bottom:.0625rem solid rgba(43,34,27,.14);padding:.375rem 0}.legal-tabla th,.legal-tabla td{padding:.375rem 0;border:0}.legal-tabla td::before{content:attr(data-etiqueta);display:block;margin-bottom:.125rem;font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#8A6A45}}
.compartir{display:flex;flex-wrap:wrap;gap:.625rem;align-items:center;padding-top:1.25rem;border-top:.0625rem solid rgba(43,34,27,.14)}
.compartir>span{font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#6B5A48}
.compartir>a{text-decoration:none;font-size:.875rem;font-weight:600;padding:.5rem .875rem;border:.09375rem solid #2B221B;border-radius:62.4375rem}
.caja-autor{display:flex;gap:1.125rem;align-items:center;padding:1.375rem;border-radius:1.25rem;background:#FFFFFF}
.caja-autor__foto{flex:none;width:4.5rem;height:4.5rem;border-radius:50%;overflow:hidden;position:relative;background:#EDE4D6}
.caja-autor__texto{display:flex;flex-direction:column;gap:.375rem}
.caja-autor__texto>span:nth-child(1){font-weight:800;font-size:1.125rem}
.caja-autor__texto>span:nth-child(2){font-size:.9375rem;line-height:1.5;color:#4A3B2E}
.caja-autor__texto>a{font-size:.875rem;font-weight:700}
.relacionados{padding:clamp(4.5rem,9vw,7.5rem) calc(var(--margen) + var(--lado));background:#EDE4D6;display:flex;flex-direction:column;gap:2.25rem}
.relacionados__cabeza{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem}
.relacionados__cabeza h2{margin:0;font-size:clamp(1.6125rem,3.096vw,3.01rem);line-height:1;letter-spacing:-0.015em;font-weight:800}
.relacionados__cabeza a{font-size:1rem;font-weight:700}

/* ---------- Contacto final de las páginas interiores (#cta) ---------- */
.cta{background:var(--acento);color:#2B221B;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26.25rem),1fr));gap:3rem clamp(2rem,6vw,6rem);align-items:start}
.cta__texto{display:flex;flex-direction:column;gap:1.5rem}
.titulo-cta{margin:0;font-size:clamp(2.15rem,4.816vw,4.945rem);line-height:.92;letter-spacing:-0.02em;font-weight:800;max-width:13.95em;text-wrap:balance}
.cta__sub{margin:0;font-size:1.1875rem;line-height:1.55;max-width:30em}
.cta__directo{display:flex;flex-direction:column;gap:.875rem;margin-top:1.25rem}
.cta__caja{background:#F5EFE6;border-radius:1.5rem;padding:clamp(1.375rem,3vw,2.25rem);box-shadow:0 1.5rem 3.75rem -1.5rem rgba(43,34,27,.45)}
/* garciabriz: los datos, siempre en dos columnas en escritorio (lo pidió Rafael: con el auto-fit del diseño, de 200 px, entre 900 y 1180 px de ventana quedaban en una columna o en tres); en móvil, en una, como el de la home */
.formulario--cta{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:899.98px){.formulario--cta{grid-template-columns:1fr}}
.formulario--cta input,.formulario--cta textarea{background:#FFFFFF;border-color:#9C8A74}
/* garciabriz: el bloque de contacto de las páginas interiores, rehecho para convertir (lo pidió Rafael tras el análisis de UX):
   el botón manda (a todo el ancho y más grande); la promesa (24 h) y su foto; el contacto directo, secundario (con contorno;
   en el diseño, tarjetas oscuras que pesaban más que el formulario) y con WhatsApp; los campos opcionales, marcados. «Te
   respondo yo, Rafael…», sin ancho máximo (era de 30em): en una línea donde cabe, en escritorio desde 1280 px (lo pidió
   Rafael el 01-10-2026) */
.cta__promesas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.625rem;font-size:1.0625rem;font-weight:700}
.cta__promesas li{display:flex;align-items:center;gap:.625rem}
.cta__promesas li::before{content:'✓';flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:#2B221B;color:var(--acento);font-size:.8125rem;font-weight:800}
.cta__yo{display:flex;align-items:center;gap:.875rem}
.cta__yo img{flex:none;width:3.5rem;height:3.5rem;border-radius:50%;object-fit:cover;object-position:50% 20%;border:.125rem solid #2B221B;background:#EDE4D6}
.cta__yo p{margin:0;font-size:1rem;line-height:1.45}
.tarjeta-directa--suave{background:transparent;color:#2B221B;border:.09375rem solid rgba(43,34,27,.45);box-shadow:none;padding:.875rem 1.125rem;border-radius:1rem;gap:.25rem}
.tarjeta-directa--suave:hover{background:rgba(43,34,27,.08)!important}
.tarjeta-directa--suave .tarjeta-directa__etiqueta{color:#5A4838}
.tarjeta-directa--suave .tarjeta-directa__valor{font-size:clamp(1rem,1.25vw,1.1875rem)}
.tarjeta-directa--suave .tarjeta-directa__flecha{color:#2B221B;font-size:1.125rem}
/* garciabriz: en el bloque de contacto, las tres vías en una fila y del mismo ancho cuando caben (lo pidió Rafael el
   01-10-2026); si no, WhatsApp y «Llámame» juntas y el email debajo, a todo el ancho (flex-wrap: cada una, como poco, lo
   que mide su texto) */
.directo__opciones--tres>.tarjeta-directa{flex:1 1 0}
/* garciabriz: con dos columnas, las dos del bloque de contacto siempre de la misma altura (lo pidió Rafael el
   01-10-2026): el título arriba, a la altura de la caja del formulario, y el contacto directo abajo, alineado con su
   borde inferior; si la columna del texto es la más alta, el formulario se centra en su caja */
@media (min-width:900px){.cta{align-items:stretch}.cta__directo{margin-top:auto}.cta__caja{display:flex;flex-direction:column;justify-content:center}}
.tarjeta-directa--wa .tarjeta-directa__etiqueta::before{content:'';display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:#25D366;margin-right:.4375rem;vertical-align:.0625rem}
.formulario .opcional{text-transform:none;letter-spacing:0;color:#8A7A66;font-weight:400}
/* garciabriz: en una columna (móvil y tableta; la rejilla del bloque pasa a una sola por debajo de ~1000 px), el formulario
   justo debajo del título y después lo demás: las promesas, «te respondo yo» y el contacto directo (lo pidió Rafael el
   30-09-2026). El bloque del texto deja de ser caja (display: contents) para poder ordenar sus piezas con el formulario */
@media (max-width:999.98px){
  .cta{display:flex;flex-direction:column;gap:1.5rem}
  .cta__texto{display:contents}
  .cta__caja{order:1;margin:.25rem 0 .75rem}
  .cta__texto>:not(.titulo-cta):not(.cta__sub){order:2}
}
.boton-enviar--cta{width:100%;display:flex;justify-content:center;align-items:center;gap:.625rem;font-size:1.125rem;padding:1.125rem 1.5rem}
.boton-enviar--cta:hover{background:#4A3B2E!important;opacity:1!important}
.formulario__nota{margin:0;width:100%;text-align:center;font:500 .8125rem 'Nunito Sans',system-ui,sans-serif;color:#6B5A48}
.formulario textarea{resize:vertical}
.formulario .ancho-total{grid-column:1 / -1}
/* Casilla legal de los formularios (lo pidió Rafael; parciales/casilla-legal.html): obligatoria y sin
   marcar, con el borde de los campos y, marcada, rellena del color del botón de enviar */
.legal,.formulario .legal,.herramienta__form .legal{display:flex;flex-direction:row;align-items:center;gap:.625rem;font:500 .8125rem/1.45 'Nunito Sans',system-ui,sans-serif;cursor:pointer;text-wrap:pretty;text-align:left}
.legal a{color:inherit;text-decoration:underline;text-underline-offset:.125rem}
.formulario .legal input,.herramienta__form .legal input,.legal input{appearance:none;-webkit-appearance:none;flex:none;width:1.25rem;height:1.25rem;margin:0;padding:0;border:.09375rem solid #9C8A74;border-radius:.375rem;background:#FFFFFF;display:grid;place-content:center;cursor:pointer}
.legal input::before{content:'';width:.6875rem;height:.6875rem;background:#F5EFE6;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transform:scale(0);transition:transform .12s ease}
.legal input:checked{background:#2B221B;border-color:#2B221B}
.legal input:checked::before{transform:scale(1)}
.legal input:focus-visible{outline:.125rem solid var(--acento);outline-offset:.125rem}
.legal--oscuro input{background:transparent;border-color:rgba(245,239,230,.5)}
.legal--oscuro input:checked{background:var(--acento);border-color:var(--acento)}
.legal--oscuro input::before{background:#2B221B}

/* ---------- Página de servicios (Servicios v2) ---------- */
.hero-hub{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:6rem calc(var(--margen) + var(--lado)) 0;box-sizing:border-box}
.tarjeta-hub{gap:1.375rem;max-width:37.5rem}
.titulo-hub{margin:0;font-size:clamp(2.0425rem,3.956vw,4.085rem);line-height:.95;letter-spacing:-0.0175em;font-weight:800;text-wrap:balance}
.anclas-pilares{display:flex;flex-wrap:wrap;gap:.5rem}
.anclas-pilares a{text-decoration:none;font-size:.9375rem;font-weight:600;padding:.5rem .875rem;border:.09375rem solid currentColor;border-radius:62.4375rem}
.pilar-hub{min-height:125vh;scroll-margin-top:4.5rem}
.pilar-hub .tarjeta-bloque{gap:1.25rem;max-width:36.25rem}
.pilar-hub__lista{list-style:none;margin:.25rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14.375rem),1fr));gap:0 1.25rem;border-top:.0625rem solid var(--linea)}
.pilar-hub__lista li{border-bottom:.0625rem solid var(--linea)}
.pilar-hub__lista h3{margin:0;font-size:inherit;font-weight:inherit}
.pilar-hub__lista h3>span{display:flex;justify-content:space-between;gap:.75rem;padding:.75rem 0;font-size:1rem;font-weight:600}
.pilar-hub__botones{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:.375rem}
.boton-marron{text-decoration:none;background:#5A4838;color:#FFFFFF;font-weight:700;font-size:.9375rem;padding:.8125rem 1.25rem;border-radius:62.4375rem}
.boton-contorno--115{padding:.71875rem 1.25rem}
.cta-hub{background:var(--acento);color:#2B221B;display:flex;flex-direction:column;gap:1.75rem}
.cta-hub__texto{margin:0;font-size:1.1875rem;line-height:1.55;max-width:32em}
.boton-oscuro--grande{font-size:1rem;padding:.9375rem 1.375rem}
.boton-borde--grande{font-size:1rem;padding:.84375rem 1.375rem}

/* ---------- Pie ---------- */
.pie{background:#2B221B;color:#F5EFE6;padding:3.5rem calc(var(--margen) + var(--lado)) 2.5rem;display:flex;flex-direction:column;gap:2.5rem}
.pie--elevado{position:relative;z-index:2}
.pie__rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr));gap:2rem}
.pie__marca{display:flex;flex-direction:column;gap:.625rem}
.pie__marca img{display:block;height:3.75rem;width:auto;align-self:flex-start}
.pie__lema{font-size:.875rem;line-height:1.5;color:#D8CCBC}
.pie__nav{display:flex;flex-direction:column;gap:.5625rem;font-size:.875rem}
.pie__nav a{text-decoration:none}
.pie__etiqueta{font:600 .6875rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#D8CCBC}
.pie__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 1.5rem;padding-top:1.5rem;border-top:.0625rem solid rgba(245,239,230,.18);font:500 .75rem 'JetBrains Mono',monospace;color:#D8CCBC}
.pie__legales{display:flex;flex-wrap:wrap;gap:1.125rem}

/* ================= Responsive: lo que el diseño calculaba en JS ================= */
/* medio: ancho < 1280 */
@media (max-width:1279.98px){
  .tarjeta-bloque{padding:1.75rem;background:var(--tarjeta);-webkit-backdrop-filter:blur(.625rem);backdrop-filter:blur(.625rem)}
  .tarjeta-servicio{-webkit-backdrop-filter:blur(.625rem);backdrop-filter:blur(.625rem)}
}
/* bajo: alto < 760 (el estrecho, que va después, manda sobre este) */
@media (max-height:759.98px){
  .hero__h1{font-size:clamp(1.935rem,3.096vw,3.01rem)}
}
/* estrecho: ancho < 900 */
@media (max-width:899.98px){
  .cabecera__nav{display:none}
  /* «Contacto» y «Menú», del mismo tamaño (lo pidió Rafael; en el diseño «Menú» era más pequeño:
     69x35 frente a 99x39) */
  .cabecera__contacto,.cabecera__menu{box-sizing:border-box;height:2.5rem;min-width:6.25rem;padding:0 1.125rem;display:inline-flex;align-items:center;justify-content:center}
  .mega{display:none!important}
  /* garciabriz: en el diseño, el lateral de «Mi historia» (título y foto) y el índice del artículo se quedaban fijos al
     bajar también en móvil, con una sola columna: el texto les pasaba por encima (lo vio Rafael). Aquí, en su sitio */
  .conoceme__lateral,.indice-articulo{position:static}
  .hero__contenido{--hero-desplaza:0rem;top:5.25rem;gap:.875rem;max-width:calc(100vw - 2rem)}
  .hero__h1{font-size:clamp(1.82rem,7.826vw,2.5025rem)}
  .hero__sub{font-size:.9375rem}
  /* garciabriz: «Haz scroll» también en móvil (en el diseño no salía; lo pidió Rafael), solo al abrir la home: se va al
     empezar la animación y no vuelve (main.js). Sin el ratón, que en un móvil no pinta nada: el texto y las flechas */
  .hero__scroll{bottom:1.125rem;gap:.3125rem;padding:.375rem .75rem}
  .hero__raton{display:none}
  .hero__scroll-escritorio{display:none}
  .hero__scroll-movil{display:inline}
  .bloque{padding:52vh 1rem 8vh}
  .tarjeta-bloque{padding:1.375rem}
  .contacto-home{padding:4rem 1rem 8vh} /* garciabriz: 50vh en el diseño, el sitio del cuarto de la escena, que ya no sale (ver arriba) */
  /* casos, servicios y «Sobre mí»: la tarjeta de la cabecera va de lado a lado y llega hasta la
     sección siguiente (en el diseño quedaba un hueco de 6vh por el que se veía la escena): lo
     pidió Rafael. Los 6vh pasan a ser relleno de la tarjeta */
  /* garciabriz: el texto, justo debajo de lo que necesita la animación para ocupar todo el ancho (104 px + k × el
     ancho, `--k-movil` de cada página: tools/medir-zonas.py), desde el 52 % del alto (lo pidió Rafael). Como mucho,
     el 62 % en horizontal, donde no llega nunca; en vertical, el 92 % (ver abajo). La escena hace la misma cuenta
     (zonaFin en src/escena/escena.js) */
  .hero-servicio{padding:clamp(52vh, calc(6.5rem + var(--k-movil, 0) * 100vw + 2vh), 62vh) 0 0}
  .hero-hub{padding:52vh 1rem 8vh}
  /* Contacto: en el diseño el muñeco del móvil caía encima del título. La escena arriba, y el
     contenido desde el 52 % del alto, como la mayoría de los casos, para que se vea el formulario
     debajo (aunque la animación no llegue a todo el ancho), en un panel con fondo de lado a lado,
     como la tarjeta de los casos, para que al bajar no se vea la animación detrás del texto (lo
     pidió Rafael) */
  .hero-contacto{padding:52vh 0 0;grid-template-columns:minmax(0,1fr)}
  .contacto__columna{padding:1.375rem 1rem 4rem;background:var(--tarjeta);-webkit-backdrop-filter:blur(.625rem);backdrop-filter:blur(.625rem);border-radius:1.25rem 1.25rem 0 0}
  .tarjeta-servicio{max-width:100%;padding:1.375rem 1rem 6vh;background:var(--tarjeta);border-radius:1.25rem 1.25rem 0 0}
  .wa{--wa-abajo:calc(.875rem + env(safe-area-inset-bottom));--wa-alto:10.125rem;right:.875rem;width:8.4375rem}
  .wa__lienzo{width:8.4375rem}
  /* el diseño ponía calc(100vw - 40px) sin contar el relleno ni el borde y el bocadillo se
     salía por la izquierda. Como mucho, el 60 % del ancho (lo pidió Rafael): 50 px son el
     relleno (48) y el borde (2) */
  .wa__globo{max-width:calc(60vw - 3.125rem)}
  .wa__boton{width:3.25rem;height:3.25rem}
}
/* Móvil en vertical: el diseño ponía el texto de la portada a 84 px, casi pegado a la
   cabecera (73): más aire, lo pidió Rafael (128 px; 104 en los móviles bajos, como un iPhone
   SE, para que la escena de debajo no pise el texto). En horizontal se queda como en el
   diseño, que el alto no sobra. */
@media (max-width:899.98px) and (orientation:portrait){
  .hero__contenido{top:6.5rem}
  /* garciabriz: en vertical, la animación de casos, servicios y «Sobre mí» ocupa siempre todo el ancho, aunque el
     texto quede más abajo (lo pidió Rafael: «siempre al 100 % en todos los dispositivos»): como mucho, el 92 % del
     alto (en los móviles bajos, como uno de 360x640, Proeti necesitaría algo más) */
  .hero-servicio{padding-top:clamp(52vh, calc(6.5rem + var(--k-movil, 0) * 100vw + 2vh), 92vh)}
}
/* garciabriz: con todo a escala del ancho (ver html), un móvil estrecho es «alto» si lo es en proporción: el Realme 14 Pro+
   (360x709) es como el Pixel 10 Pro (445x874) y no como un iPhone SE. Desde 445 px de ancho, como estaba (740 px) */
@media (max-width:899.98px) and (orientation:portrait) and (min-height:740px),(max-width:899.98px) and (orientation:portrait) and (max-aspect-ratio:5/9){
  .hero__contenido{top:8rem}
}
@media (min-width:900px){
  .menu-movil{display:none!important}
}
/* Pantallas verticales que no son de móvil (un iPad Pro en vertical): el texto de la
   portada arriba y la escena debajo (la escena usa el mismo corte, aspecto <= 0,9). No
   está en el diseño, que solo tenía la versión de al lado y ahí se quedaba pequeña. */
@media (min-width:900px) and (max-aspect-ratio:9/10){
  .hero__contenido{--hero-desplaza:0rem;top:7.5rem}
}
/* garciabriz: con el móvil en horizontal no hay sitio para «Haz scroll»: tapaba la escena (en vertical sí sale, ver arriba) */
@media (max-width:899px) and (max-height:500px){.hero__scroll{display:none}}

/* =====================================================================================================================
   PRUEBA DE COLOR (03-10-2026; la pidió Rafael con una maqueta: «haz esta prueba de color, con ese verde, a ver cómo queda,
   para los ctas y los detalles»). El verde lima de su maqueta (a ojo, #B8D400) en los botones principales y en los detalles
   (todo lo que usa --acento: líneas, números, puntos, insignias y flechas; los iconos, el botón de los formularios y el «Ver el proyecto» de los casos, como estaban). Los fondos grandes siguen en el tostado de
   siempre (--tostado: el bloque de contacto, las secciones de acento y el tema «a»), y la escena no cambia. Para quitar la
   prueba: borrar este bloque, hasta el final del fichero (la copia de antes está en el historial de la sesión).
   ===================================================================================================================== */
:root{--tostado:#C29A6A;--acento:#B8D400}
.pagina{--cta-bg:var(--acento);--cta-fg:#2B221B}
.pagina[data-tema="a"]{--bg:var(--tostado)}
.seccion--acento,.cta,.cta-hub,.herramienta{background:var(--tostado)}
.boton-oscuro,.boton-marron{background:var(--acento);color:#2B221B}
.cifra__numero::first-letter{color:var(--acento)}
.razon,.incluye-item,.que-item{position:relative;border-top-color:transparent}
.razon::before,.incluye-item::before,.que-item::before{content:'';position:absolute;left:0;right:0;top:-.125rem;height:.125rem;border-radius:.125rem;background:var(--acento);pointer-events:none}
/* El menú y la barra de scroll, como estaban (lo pidió Rafael el mismo día: «la barra de scroll déjala como estaba»; «el menú igual,
   déjalo como antes»): el tostado en la barra de progreso, el subrayado de los enlaces y el desplegable (rótulos, iconos, flecha y
   tarjeta de Contacto, con sus colores de antes y la flecha de «Cuéntame tu caso», que primero pidió en verde y luego también como estaba) y en el menú móvil */
.cabecera__progreso,.cabecera__nav>a::after,.cabecera__servicios::after{background:var(--tostado)}
.mega__etiqueta .punto{background:var(--tostado)}
.icono-pilar,.que-item>span,.contacto__dato>span:first-child,.chips-servicio a>span{background:var(--tostado)} /* los iconos, como estaban (lo pidió Rafael el mismo día): el menú, «Los ámbitos que domino», «Qué hice»… */
.mega__nombre::after{color:var(--tostado)}
.pagina .mega__destacado{--cta-bg:#5A4838;--cta-fg:#FFFFFF}
.pagina[data-tema="d"] .mega__destacado{--cta-bg:var(--tostado);--cta-fg:#2B221B}

/* TIPOGRAFÍA (03-10-2026; la pidió Rafael con dos vistas previas de Google Fonts, primero a prueba en la portada y, al gustarle, para toda la
   web): Google Sans Flex en los encabezados y Nunito Sans en el cuerpo, en lugar de Bricolage Grotesque, que se queda solo para los
   rótulos de la escena, dibujados en lienzos (main.js la pide al arrancarla). Desde el dominio (assets/fonts/, tools/bajar-fuentes.py nuevas)
   y con rango de pesos, no una regla por peso como las de Bricolage. Los encabezados, con el tamaño y el letter-spacing cambiados en sus
   reglas, porque a los mismos píxeles Google Sans Flex tiene las mayúsculas un 9 % más altas y los titulares grandes un 11-13 % más
   anchos (medido el 03-10-2026): tamaño x0,86 a los de 3rem o más, x0,91 a los de 2rem o más, x0,95 a los de 1,25rem o más y x0,84 a los
   pilares (el principal, x0,80; «muy grandes», dijo Rafael), y letter-spacing a la mitad (el de -0.02 a -0.06em que traían está ajustado
   a Bricolage: con él, las letras casi se tocaban; probado a -0.035, -0.02, -0.01 y 0). Esta regla, la última del fichero: gana a las
   de cada encabezado, sean de la hoja o de una media query */
@font-face{font-family:'Google Sans Flex';font-style:normal;font-weight:600 800;font-display:swap;src:url(../assets/fonts/google-sans-flex-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Google Sans Flex';font-style:normal;font-weight:600 800;font-display:swap;src:url(../assets/fonts/google-sans-flex-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(../assets/fonts/nunito-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(../assets/fonts/nunito-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
.pagina :is(h1,h2,h3,h4,h5,h6,.hero__h1,.titulo-seccion,.titulo-servicios,.titulo-servicio,.titulo-form,.titulo-cta,.titulo-hub,.titulo-contacto,.titulo-indice,.titulo-caso,.titulo-articulo,.titulo-mas,.titulo-herramienta,.titulo-lenguajes,.pilar__titulo,.mega__nombre,.mega__destacado-titulo,.cifra__numero,.cifras__n,.metrica__n,.tarjeta-caso__titulo,.articulo-tarjeta__titulo,.tarjeta-directa__valor,.desplegable__boton,.faq__boton,.faq-contacto__boton,.cita__texto,.panel-oscuro__lema,.ambito__titulo,.ambitos-contacto__titulo,.banda-cta__titulo,.entregables__titulo,.relacionados__titulo,.articulo__llamada-titulo){font-family:'Google Sans Flex','Nunito Sans',system-ui,sans-serif}