/* ==========================================================================
   Colomer.dev · Hoja de estilos principal
   --------------------------------------------------------------------------
   Todas las clases llevan el prefijo `clmdev-` (§2.2).
   Los colores y tipografías NUNCA se escriben literales en las reglas: salen
   de las variables de :root, que son el sistema de diseño del proyecto.
   ========================================================================== */

:root{
  /* --- Fondos y superficies --- */
  --clmdev-bg:#070B14;
  --clmdev-bg2:#0B1220;
  --clmdev-panel:#0F1826;
  --clmdev-panel2:#131F30;
  --clmdev-marino:#0F172A;

  /* --- Color de marca --- */
  --clmdev-cyan:#38BDF8;
  --clmdev-cyan-luz:#7DD3FC;
  --clmdev-cyan-osc:#0EA5E9;
  --clmdev-violeta:#8B7FF5;
  --clmdev-menta:#4FE0B0;

  /* --- Texto --- */
  --clmdev-blanco:#F4F8FC;
  --clmdev-texto:#AEBACD;
  /* Terciario. Estuvo en #6B7A90 hasta el 2026-08-24: daba 4.52:1 sobre --bg
     (pasaba AA por 0.02) pero 4.34:1 sobre --bg2, donde NO llegaba al minimo
     de 4.5:1 — y ahi viven los tags de proyecto y los chips, a 0.72rem. Este
     valor da 5.85:1 sobre --bg y 5.62:1 sobre --bg2. Si se vuelve a bajar,
     recalcular contra --bg2, que es el caso peor. */
  --clmdev-texto-t:#7E8DA4;

  /* --- Bordes --- */
  --clmdev-linea:#1C2A3E;
  --clmdev-linea-luz:#26374F;

  /* --- Tipografía --- */
  --clmdev-display:'Space Grotesk', sans-serif;
  --clmdev-body:'Inter', sans-serif;
  --clmdev-mono:'Space Mono', monospace;

  /* --- Layout --- */
  --clmdev-maxw:1200px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--clmdev-bg);color:var(--clmdev-texto);font-family:var(--clmdev-body);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea{font-family:inherit;font-size:1rem}
.clmdev-wrap{max-width:var(--clmdev-maxw);margin:0 auto;padding:0 26px}
:focus-visible{outline:2px solid var(--clmdev-cyan);outline-offset:3px}

/* Enlace de salto. Es el primer elemento enfocable del documento: quien navega
   con teclado o lector de pantalla llega al contenido sin tabular por los 5
   enlaces del nav en cada carga. Se saca de pantalla con left, NO con
   display:none ni visibility:hidden — esos lo quitarian del orden de foco y no
   habria forma de llegar a el. */
.clmdev-saltar{position:absolute;left:-9999px;top:0;z-index:100;background:var(--clmdev-cyan);color:var(--clmdev-bg);font-weight:600;padding:12px 22px;border-radius:0 0 10px 0}
.clmdev-saltar:focus{left:0}

/* glow de fondo
   Eran dos circulos solidos con filter:blur(120px). Se ven igual, pero un
   desenfoque de ese radio es de lo mas caro que hay para el GPU, y al ser
   position:fixed se repinta en cada scroll: en un Android de gama media se
   sentia. Un degradado radial da el mismo difuminado en una sola pasada.
   Las medidas no son arbitrarias: el circulo de 500px desenfocado 120px se
   extendia hasta ~900px, y el centro visual quedaba en top:100px/right:150px.
   Estos valores conservan ese centro exacto — si se tocan el tamaño, hay que
   recalcular top/left/right o la luz se corre de lugar. */
.clmdev-glow{position:fixed;z-index:0;pointer-events:none}
.clmdev-glow-a{width:900px;height:900px;top:-350px;right:-300px;
  background:radial-gradient(circle,rgba(56,189,248,.075),rgba(56,189,248,.05) 34%,transparent 66%)}
.clmdev-glow-b{width:860px;height:860px;top:calc(60% - 200px);left:-360px;
  background:radial-gradient(circle,rgba(139,127,245,.055),rgba(139,127,245,.035) 34%,transparent 66%)}

/* nav */
.clmdev-nav{position:sticky;top:0;z-index:60;background:rgba(7,11,20,.8);backdrop-filter:blur(14px);border-bottom:1px solid var(--clmdev-linea)}
.clmdev-nav-in{display:flex;align-items:center;gap:22px;height:76px}
.clmdev-logo{font-family:var(--clmdev-display);font-weight:700;font-size:1.35rem;color:var(--clmdev-blanco);letter-spacing:-.01em;display:flex;align-items:center;gap:2px}
.clmdev-logo-b1{color:var(--clmdev-cyan)}
.clmdev-logo-b2{color:var(--clmdev-texto-t);font-weight:400}
.clmdev-menu{display:flex;align-items:center;gap:30px;margin-left:auto}
.clmdev-menu a{font-size:.94rem;font-weight:500;color:var(--clmdev-texto);transition:color .18s;position:relative}
.clmdev-menu a:hover{color:var(--clmdev-blanco)}
/* Subrayado de la seccion activa. Crece desde la izquierda en vez de aparecer
   de golpe: el cambio de seccion al hacer scroll se lee mejor. */
.clmdev-menu a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--clmdev-cyan);transform:scaleX(0);transform-origin:left;transition:transform .22s}
.clmdev-menu a.clmdev-menu-activo{color:var(--clmdev-blanco)}
.clmdev-menu a.clmdev-menu-activo::after{transform:scaleX(1)}

/* El nav es sticky de 76px: sin esto, al saltar a una ancla la seccion queda
   por debajo del nav y su encabezado no se ve. */
section[id]{scroll-margin-top:92px}
.clmdev-nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--clmdev-cyan);color:var(--clmdev-bg);font-weight:600;font-size:.9rem;padding:11px 20px;border-radius:9px;transition:transform .16s,box-shadow .2s;box-shadow:0 0 0 rgba(56,189,248,0)}
.clmdev-nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px -6px rgba(56,189,248,.5)}
.clmdev-nav-cta svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4}
.clmdev-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--clmdev-linea);border-radius:9px;margin-left:auto}
.clmdev-burger svg{width:22px;height:22px;stroke:var(--clmdev-blanco);fill:none;stroke-width:2}

/* ===== HERO ===== */
.clmdev-hero{position:relative;z-index:2;padding:clamp(70px,11vw,140px) 0 clamp(50px,7vw,90px)}
.clmdev-tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--clmdev-mono);font-size:.82rem;color:var(--clmdev-cyan);background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.25);padding:8px 15px;border-radius:100px;margin-bottom:30px}
.clmdev-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--clmdev-menta);box-shadow:0 0 10px var(--clmdev-menta)}
.clmdev-hero h1{font-family:var(--clmdev-display);font-weight:700;font-size:clamp(2.8rem,8vw,6rem);line-height:1;letter-spacing:-.03em;color:var(--clmdev-blanco);margin-bottom:28px}
.clmdev-grad{background:linear-gradient(120deg,var(--clmdev-cyan),var(--clmdev-violeta));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.clmdev-hero p{font-size:clamp(1.1rem,2.2vw,1.35rem);max-width:600px;margin-bottom:38px;color:var(--clmdev-texto)}
.clmdev-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:56px}
.clmdev-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 30px;font-weight:600;font-size:1rem;border-radius:11px;transition:transform .16s,box-shadow .2s,background .2s,border-color .2s}
.clmdev-btn:hover{transform:translateY(-2px)}
.clmdev-btn-p{background:var(--clmdev-cyan);color:var(--clmdev-bg)}
.clmdev-btn-p:hover{box-shadow:0 12px 30px -8px rgba(56,189,248,.55)}
.clmdev-btn-g{border:1px solid var(--clmdev-linea-luz);color:var(--clmdev-blanco)}
.clmdev-btn-g:hover{border-color:var(--clmdev-cyan);background:rgba(56,189,248,.06)}
.clmdev-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2}
.clmdev-hero-stats{display:flex;flex-wrap:wrap;gap:40px;border-top:1px solid var(--clmdev-linea);padding-top:34px}
.clmdev-hs b{font-family:var(--clmdev-display);font-weight:700;font-size:2.3rem;color:var(--clmdev-blanco);line-height:1;display:block}
.clmdev-hs b em{font-style:normal;color:var(--clmdev-cyan)}
.clmdev-hs span{font-size:.86rem;color:var(--clmdev-texto-t);margin-top:4px;display:block}

/* ===== sección genérica ===== */
.clmdev-sec{position:relative;z-index:2;padding:clamp(60px,9vw,110px) 0}
.clmdev-sec-head{margin-bottom:56px;max-width:640px}
.clmdev-sec-head-centro{margin-inline:auto;text-align:center}
.clmdev-eyebrow{font-family:var(--clmdev-mono);font-size:.82rem;color:var(--clmdev-cyan);letter-spacing:.05em;margin-bottom:16px;display:inline-block}
.clmdev-eyebrow::before{content:"// "}
.clmdev-sec-head h2{font-family:var(--clmdev-display);font-weight:700;font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;letter-spacing:-.02em;color:var(--clmdev-blanco)}
.clmdev-sec-head p{color:var(--clmdev-texto);font-size:1.1rem;margin-top:16px}

/* ===== servicios ===== */
.clmdev-serv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.clmdev-serv{position:relative;background:linear-gradient(160deg,var(--clmdev-panel),var(--clmdev-bg2));border:1px solid var(--clmdev-linea);border-radius:18px;padding:32px;overflow:hidden;transition:transform .25s,border-color .25s}
.clmdev-serv::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--clmdev-cyan),transparent);opacity:0;transition:opacity .3s}
.clmdev-serv:hover{transform:translateY(-6px);border-color:var(--clmdev-linea-luz)}
.clmdev-serv:hover::before{opacity:1}
.clmdev-ic{width:56px;height:56px;border-radius:14px;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.2);display:flex;align-items:center;justify-content:center;margin-bottom:22px;transition:background .25s}
.clmdev-serv:hover .clmdev-ic{background:rgba(56,189,248,.18)}
.clmdev-ic svg{width:27px;height:27px;stroke:var(--clmdev-cyan);fill:none;stroke-width:1.8}
.clmdev-serv h3{font-family:var(--clmdev-display);font-weight:600;font-size:1.3rem;color:var(--clmdev-blanco);margin-bottom:11px}
.clmdev-serv p{font-size:.96rem;color:var(--clmdev-texto);line-height:1.6}
.clmdev-num{position:absolute;top:26px;right:30px;font-family:var(--clmdev-mono);font-size:.82rem;color:var(--clmdev-texto-t)}

/* ===== proyectos / demos ===== */
.clmdev-cat-head{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.clmdev-cat-ic{width:44px;height:44px;flex-shrink:0;border-radius:11px;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.22);display:flex;align-items:center;justify-content:center}
.clmdev-cat-ic svg{width:22px;height:22px;stroke:var(--clmdev-cyan);fill:none;stroke-width:1.9}
.clmdev-cat-head h3{font-family:var(--clmdev-display);font-weight:600;font-size:1.6rem;color:var(--clmdev-blanco);white-space:nowrap}
.clmdev-cat-line{flex:1;height:1px;background:linear-gradient(90deg,var(--clmdev-linea-luz),transparent)}
.clmdev-proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* separador entre categorías de proyectos (antes era un style inline repetido) */
.clmdev-proj-grid-sep{margin-bottom:64px}
.clmdev-proj{position:relative;background:var(--clmdev-panel);border:1px solid var(--clmdev-linea);border-radius:20px;overflow:hidden;transition:transform .25s,border-color .25s}
.clmdev-proj:hover{transform:translateY(-6px);border-color:var(--clmdev-cyan)}
.clmdev-thumb{aspect-ratio:16/10;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.clmdev-thumb svg{width:100%;height:100%}
/* Marco de telefono para las capturas de invitaciones.
   Las capturas salen del celular a 720x1468 (casi 1:2) y la miniatura es 16:10
   horizontal: la imagen entera no entra de ninguna forma. Recortarla a 16:10
   dejaria una franja sin pies ni cabeza, asi que se muestra dentro de un marco
   sobre el degradado de la tarjeta. Ademas es lo honesto: una invitacion
   digital se ve en un celular, no en una pantalla ancha.
   object-position arriba: lo que interesa es la portada, no el medio. */
.clmdev-mock{height:92%;aspect-ratio:9/19;flex-shrink:0;border-radius:13px;overflow:hidden;border:2px solid rgba(255,255,255,.18);box-shadow:0 16px 38px -10px rgba(0,0,0,.65)}
.clmdev-mock img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.clmdev-proj-body{padding:26px 28px 30px}
/* Estado del proyecto. Ocupa el lugar del enlace "Ver sitio" en las tarjetas
   que no tienen sitio publico, para que no queden visualmente cortas al lado
   de sus hermanas.
   Antes se llamaba clmdev-badge-soon y solo servia para decir "Proximamente";
   quedo huerfano en el CSS cuando Electrocell recibio su enlace (commit
   923da41). Se renombro a neutro porque ahora marca cualquier estado — privado,
   en desarrollo, proximamente — y un nombre con "soon" mentia sobre su uso. */
.clmdev-estado{display:inline-flex;align-items:center;gap:9px;font-family:var(--clmdev-mono);font-size:.76rem;letter-spacing:.04em;color:var(--clmdev-texto-t);background:var(--clmdev-bg2);border:1px solid var(--clmdev-linea);padding:7px 13px;border-radius:7px}
/* Mismo punto de "activo" que el chip del hero: dice terminado, no pendiente. */
.clmdev-estado::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--clmdev-menta);flex-shrink:0}
/* Puerta al catalogo de invitaciones, debajo de esa grilla. Es un bloque con
   fondo propio para que se lea como puerta a otra seccion y no como una nota
   al pie: enlaza al catalogo entero, que es una de las dos lineas de servicio
   principales.

   Hasta el 2026-09-02 el parrafo no declaraba font-size — heredaba el 1rem
   del body, o sea el escalon MAS CHICO de la pagina, por omision y no por
   decision, cuando toda intro de seccion es 1.1rem — y tampoco tenia
   max-width, asi que la linea se estiraba sobre los 1200px del wrap y se leia
   como un pie de foto. Las dos cosas juntas la hacian desaparecer.

   El boton sigue siendo secundario (btn-g) A PROPOSITO: el unico cyan lleno
   de la pagina es el de WhatsApp, que es la conversion que importa.

   Margen asimetrico a proposito: menos arriba que abajo, para que el bloque
   se lea pegado a SUS tarjetas de invitaciones y separado de la categoria que
   sigue. Abajo repite el de .clmdev-proj-grid-sep. */
.clmdev-proj-mas{text-align:center;margin:-24px 0 64px;padding:clamp(28px,4vw,40px) clamp(22px,3vw,32px);background:var(--clmdev-bg2);border:1px solid var(--clmdev-linea);border-radius:18px}
.clmdev-proj-mas p{max-width:56ch;margin:0 auto 24px;font-size:1.15rem;color:var(--clmdev-texto)}
.clmdev-proj-mas p b{color:var(--clmdev-blanco);font-weight:600}
.clmdev-cat{font-family:var(--clmdev-mono);font-size:.76rem;color:var(--clmdev-cyan);letter-spacing:.04em;margin-bottom:9px;display:block}
/* h4, no h3: el titulo de cada proyecto cuelga del h3 de su categoria
   ("Sitios web", "Invitaciones digitales"). Con los dos en h3 quedaban como
   hermanos y la jerarquia del documento mentia sobre la estructura. */
.clmdev-proj h4{font-family:var(--clmdev-display);font-weight:600;font-size:1.5rem;color:var(--clmdev-blanco);margin-bottom:8px}
.clmdev-proj p{font-size:.95rem;color:var(--clmdev-texto);margin-bottom:18px}
.clmdev-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;color:var(--clmdev-cyan);transition:gap .2s}
.clmdev-link:hover{gap:12px}
.clmdev-link svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2}
.clmdev-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.clmdev-tags span{font-family:var(--clmdev-mono);font-size:.72rem;color:var(--clmdev-texto-t);background:var(--clmdev-bg2);border:1px solid var(--clmdev-linea);padding:4px 10px;border-radius:6px}

/* ===== proceso ===== */
.clmdev-proceso{background:var(--clmdev-bg2)}
.clmdev-proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.clmdev-proc{position:relative;padding-top:24px;border-top:2px solid var(--clmdev-linea)}
.clmdev-proc-activo{border-top-color:var(--clmdev-cyan)}
.clmdev-proc .clmdev-n{font-family:var(--clmdev-mono);font-size:.85rem;color:var(--clmdev-cyan);margin-bottom:14px}
/* h3, no h4: cuelga directo del h2 "Como trabajamos", sin nivel intermedio. */
.clmdev-proc h3{font-family:var(--clmdev-display);font-weight:600;font-size:1.25rem;color:var(--clmdev-blanco);margin-bottom:9px}
.clmdev-proc p{font-size:.93rem;color:var(--clmdev-texto)}

/* ===== preguntas frecuentes =====
   Acordeon con <details>/<summary> nativo: abre y cierra sin una linea de JS,
   funciona con el teclado y lo anuncia el lector de pantalla solo. Cualquier
   version hecha con divs + JS seria peor en las tres cosas. */
.clmdev-faq-lista{max-width:820px;margin-inline:auto;display:grid;gap:12px}
.clmdev-faq{background:var(--clmdev-panel);border:1px solid var(--clmdev-linea);border-radius:14px;transition:border-color .25s}
.clmdev-faq[open]{border-color:var(--clmdev-linea-luz)}
.clmdev-faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;padding:20px 24px;font-family:var(--clmdev-display);font-weight:600;font-size:1.05rem;color:var(--clmdev-blanco);transition:color .18s;list-style:none}
.clmdev-faq summary:hover{color:var(--clmdev-cyan)}
/* El triangulo por defecto no se puede estilar: se apaga en los dos motores y
   se dibuja una flecha con bordes. */
.clmdev-faq summary::-webkit-details-marker{display:none}
.clmdev-faq summary::after{content:"";width:10px;height:10px;flex-shrink:0;margin-top:-4px;border-right:2px solid var(--clmdev-cyan);border-bottom:2px solid var(--clmdev-cyan);transform:rotate(45deg);transition:transform .22s}
.clmdev-faq[open] summary::after{transform:rotate(225deg);margin-top:4px}
.clmdev-faq-r{padding:0 24px 22px;font-size:.97rem;color:var(--clmdev-texto)}
.clmdev-faq-r a{color:var(--clmdev-cyan);font-weight:600}

/* ===== quien esta detras =====
   La foto es 1189x1280 (vertical). El marco es cuadrado y recorta con
   object-fit: asi el layout es estable aunque el archivo se reemplace por otro
   de proporcion distinta. object-position sube el encuadre al 22% porque el
   centro geometrico de un retrato vertical cae en el pecho, no en la cara. */
.clmdev-sobre{background:var(--clmdev-bg2)}
.clmdev-sobre-in{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:center;max-width:940px;margin-inline:auto}
.clmdev-sobre-foto{border-radius:20px;overflow:hidden;border:1px solid var(--clmdev-linea-luz);aspect-ratio:1/1}
.clmdev-sobre-foto img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.clmdev-sobre-txt h2{font-family:var(--clmdev-display);font-weight:700;font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.1;letter-spacing:-.02em;color:var(--clmdev-blanco);margin-bottom:8px}
.clmdev-sobre-rol{font-family:var(--clmdev-mono);font-size:.82rem;color:var(--clmdev-cyan);letter-spacing:.03em;margin-bottom:20px}
/* Datos de contacto visibles: hasta ahora el telefono solo existia dentro de un
   enlace wa.me, que ni Google ni un lector de pantalla leen como telefono. */
.clmdev-sobre-datos{list-style:none;margin-top:26px;border-top:1px solid var(--clmdev-linea);padding-top:22px;display:grid;gap:13px}
.clmdev-sobre-datos li{display:flex;align-items:center;gap:11px;font-size:.93rem;color:var(--clmdev-texto)}
.clmdev-sobre-datos svg{width:17px;height:17px;stroke:var(--clmdev-cyan);fill:none;stroke-width:1.9;flex-shrink:0}
.clmdev-sobre-datos a{transition:color .18s}
.clmdev-sobre-datos a:hover{color:var(--clmdev-cyan)}

/* ===== precios y tiempos =====
   El monto va en cyan y grande a proposito: es el dato que la gente vino a
   buscar. El "desde" arriba y en mono, chico, para que no se lea como precio
   cerrado. */
.clmdev-precio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:900px;margin-inline:auto}
.clmdev-precio{background:linear-gradient(160deg,var(--clmdev-panel),var(--clmdev-bg2));border:1px solid var(--clmdev-linea);border-radius:18px;padding:34px 32px;text-align:center;transition:transform .25s,border-color .25s}
.clmdev-precio:hover{transform:translateY(-6px);border-color:var(--clmdev-linea-luz)}
.clmdev-precio h3{font-family:var(--clmdev-display);font-weight:600;font-size:1.3rem;color:var(--clmdev-blanco);margin-bottom:18px}
.clmdev-precio-monto{font-family:var(--clmdev-mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--clmdev-texto-t);margin-bottom:18px}
.clmdev-precio-monto b{display:block;font-family:var(--clmdev-display);font-size:2.6rem;font-weight:700;color:var(--clmdev-cyan);line-height:1.15;margin-top:6px;letter-spacing:-.02em}
.clmdev-precio-tiempo{display:inline-flex;align-items:center;gap:9px;font-size:.92rem;color:var(--clmdev-texto)}
.clmdev-precio-tiempo svg{width:16px;height:16px;stroke:var(--clmdev-menta);fill:none;stroke-width:2;flex-shrink:0}
.clmdev-precio-nota{max-width:640px;margin:30px auto 0;text-align:center;font-size:.88rem;color:var(--clmdev-texto-t)}

/* ===== testimonios de clientes ===== */
/* 3 columnas, igual que .clmdev-serv-grid y .clmdev-proj-grid. Era la unica
   grilla a 2 columnas y con max-width propio, asi que la seccion se veia mas
   angosta que el resto de la pagina sin motivo. Cambiado el 2026-09-02. */
.clmdev-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* display:flex + margin-top:auto en el autor: las reseñas tienen largos muy
   distintos (50 a 158 caracteres) y el grid iguala la altura de la fila. Sin
   esto, la firma de la reseña corta queda flotando a media tarjeta. */
.clmdev-testi{position:relative;display:flex;flex-direction:column;background:var(--clmdev-panel);border:1px solid var(--clmdev-linea);border-radius:18px;padding:30px 32px;transition:border-color .25s}
.clmdev-testi:hover{border-color:var(--clmdev-linea-luz)}
/* Comilla decorativa. aria-hidden por CSS: al ser ::before no la lee el lector
   de pantalla, asi que no ensucia la cita. */
.clmdev-testi::before{content:"\201C";position:absolute;top:10px;right:26px;font-family:var(--clmdev-display);font-weight:700;font-size:4.5rem;line-height:1;color:var(--clmdev-cyan);opacity:.18}
.clmdev-estrellas{display:flex;gap:3px;margin-bottom:16px}
.clmdev-estrellas svg{width:17px;height:17px;fill:var(--clmdev-menta);stroke:none}
/* Calificacion agregada, en la cabecera de la seccion. Las estrellas van
   aria-hidden porque el texto de al lado ya dice "5,0": con las dos cosas
   anunciadas el lector de pantalla repite la nota dos veces. */
.clmdev-rating{display:flex;align-items:center;justify-content:center;gap:11px;margin-top:20px;flex-wrap:wrap}
.clmdev-rating .clmdev-estrellas{margin-bottom:0}
.clmdev-rating span{font-family:var(--clmdev-mono);font-size:.86rem;color:var(--clmdev-texto-t);letter-spacing:.02em}
.clmdev-rating b{color:var(--clmdev-blanco);font-weight:700;font-size:1rem}
.clmdev-testi p{position:relative;z-index:1;font-size:1rem;color:var(--clmdev-texto);margin-bottom:22px}
.clmdev-testi-autor{margin-top:auto;border-top:1px solid var(--clmdev-linea);padding-top:16px}
.clmdev-testi-autor b{display:block;font-family:var(--clmdev-display);font-weight:600;font-size:1rem;color:var(--clmdev-blanco)}
.clmdev-testi-autor span{display:block;font-family:var(--clmdev-mono);font-size:.75rem;color:var(--clmdev-texto-t);margin-top:3px}
.clmdev-testi-cta{text-align:center;margin-top:46px}
.clmdev-testi-cta p{font-size:.95rem;color:var(--clmdev-texto-t);margin-bottom:18px}
.clmdev-testi-cta svg{fill:currentColor;stroke:none}

/* ===== CTA ===== */
.clmdev-cta{position:relative;z-index:2}
.clmdev-cta-in{position:relative;background:linear-gradient(140deg,var(--clmdev-panel2),var(--clmdev-marino));border:1px solid var(--clmdev-linea-luz);border-radius:28px;padding:clamp(44px,7vw,80px);text-align:center;overflow:hidden}
.clmdev-cta-in::before{content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:600px;height:400px;background:radial-gradient(ellipse,rgba(56,189,248,.16),transparent 70%)}
.clmdev-cta-in>*{position:relative;z-index:2}
.clmdev-cta-in h2{font-family:var(--clmdev-display);font-weight:700;font-size:clamp(2rem,5vw,3.3rem);line-height:1.05;letter-spacing:-.02em;color:var(--clmdev-blanco);margin-bottom:16px}
.clmdev-cta-in p{color:var(--clmdev-texto);font-size:1.16rem;margin-bottom:34px;max-width:520px;margin-inline:auto}
.clmdev-cta-social{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:30px}
.clmdev-cta-social span{font-size:.9rem;color:var(--clmdev-texto-t)}
.clmdev-cta-social a{width:44px;height:44px;border:1px solid var(--clmdev-linea-luz);border-radius:11px;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s,transform .16s}
.clmdev-cta-social a:hover{border-color:var(--clmdev-cyan);background:rgba(56,189,248,.1);transform:translateY(-2px)}
.clmdev-cta-social svg{width:20px;height:20px;stroke:var(--clmdev-cyan);fill:none;stroke-width:1.8}

/* ===== footer ===== */
footer{position:relative;z-index:2;border-top:1px solid var(--clmdev-linea);padding:56px 0 30px;margin-top:40px}
.clmdev-foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;margin-bottom:40px}
.clmdev-foot-brand{max-width:320px}
.clmdev-foot-brand .clmdev-logo{margin-bottom:14px}
.clmdev-foot-brand p{font-size:.93rem;color:var(--clmdev-texto-t)}
.clmdev-foot-links{display:flex;gap:60px;flex-wrap:wrap}
/* h3, no h5: el ultimo encabezado antes del footer es el h2 del CTA. Con h5 se
   saltaban dos niveles de golpe, que es lo que marca un validador de a11y. */
.clmdev-fl h3{font-family:var(--clmdev-mono);font-size:.78rem;color:var(--clmdev-texto-t);letter-spacing:.06em;margin-bottom:16px;text-transform:uppercase}
.clmdev-fl a{display:block;font-size:.93rem;color:var(--clmdev-texto);margin-bottom:11px;transition:color .18s}
.clmdev-fl a:hover{color:var(--clmdev-cyan)}
.clmdev-foot-bar{border-top:1px solid var(--clmdev-linea);padding-top:24px;padding-bottom:60px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--clmdev-texto-t)}
.clmdev-foot-social{display:flex;gap:12px}
.clmdev-foot-social a{width:40px;height:40px;border:1px solid var(--clmdev-linea);border-radius:10px;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}
.clmdev-foot-social a:hover{border-color:var(--clmdev-cyan);background:rgba(56,189,248,.08)}
.clmdev-foot-social svg{width:18px;height:18px;stroke:var(--clmdev-texto);fill:none;stroke-width:1.8}
.clmdev-foot-social a:hover svg{stroke:var(--clmdev-cyan)}

/* ===== botón flotante de WhatsApp ===== */
.clmdev-flota{position:fixed;right:22px;bottom:22px;z-index:70;display:flex;align-items:center;gap:10px;background:#25D366;color:#fff;padding:14px 22px 14px 15px;border-radius:100px;box-shadow:0 14px 34px rgba(37,211,102,.4);transition:transform .2s;font-weight:600}
.clmdev-flota:hover{transform:translateY(-3px)}
.clmdev-flota svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9}
.clmdev-flota span{font-size:.9rem}

/* ===== botón volver arriba =====
   Va justo encima del botón de WhatsApp (que ocupa hasta ~74px desde abajo),
   no al lado: en móvil competirían por el mismo espacio. */
.clmdev-arriba{position:fixed;right:22px;bottom:86px;z-index:69;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--clmdev-panel2);border:1px solid var(--clmdev-linea-luz);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility .25s,border-color .2s,background .2s}
.clmdev-arriba-visible{opacity:1;visibility:visible;transform:none}
.clmdev-arriba:hover{border-color:var(--clmdev-cyan);background:rgba(56,189,248,.12)}
.clmdev-arriba svg{width:20px;height:20px;stroke:var(--clmdev-cyan);fill:none;stroke-width:2.2}

/* ===== aparición al hacer scroll ===== */
.clmdev-rev{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}
.clmdev-rev-visible{opacity:1;transform:none}

/* ===== menú móvil ===== */
.clmdev-mmenu{display:none;position:fixed;inset:76px 0 auto 0;z-index:59;background:var(--clmdev-bg);border-bottom:1px solid var(--clmdev-linea);padding:12px 26px 22px}
.clmdev-mmenu-abierto{display:block}
.clmdev-mmenu a{display:block;padding:15px 0;border-bottom:1px solid var(--clmdev-linea);font-weight:500;color:var(--clmdev-blanco)}
/* En movil no hay espacio para el subrayado: la seccion activa se marca con
   el color de marca y una barra a la izquierda. */
.clmdev-mmenu a.clmdev-menu-activo{color:var(--clmdev-cyan);border-left:2px solid var(--clmdev-cyan);padding-left:12px}

@media(max-width:920px){
  .clmdev-serv-grid{grid-template-columns:1fr 1fr}
  .clmdev-proj-grid{grid-template-columns:1fr 1fr}
  .clmdev-testi-grid{grid-template-columns:1fr 1fr}
  .clmdev-proc-grid{grid-template-columns:1fr 1fr;gap:30px}
  .clmdev-menu,.clmdev-nav-cta{display:none}
  .clmdev-burger{display:flex}
}
@media(max-width:560px){
  .clmdev-serv-grid{grid-template-columns:1fr}
  .clmdev-proj-grid{grid-template-columns:1fr}
  .clmdev-proc-grid{grid-template-columns:1fr}
  .clmdev-testi-grid{grid-template-columns:1fr}
  .clmdev-precio-grid{grid-template-columns:1fr}
  .clmdev-sobre-in{grid-template-columns:1fr;gap:28px}
  .clmdev-sobre-foto{max-width:240px;margin-inline:auto}
  .clmdev-hero-stats{gap:26px}
  .clmdev-foot-links{gap:34px}
  .clmdev-cat-head h3{font-size:1.35rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .clmdev-rev{opacity:1;transform:none}
  html{scroll-behavior:auto}
}