/*
Theme Name: CAMHUI Digital 14.23
Theme URI: https://camhuidigital.com/
Author: CAMHUI Digital
Description: Tema completo CAMHUI Digital 14 con chat propio CAM, sin Chatbase visible y movimientos GIF alojados en /cam-videos/.
Version: 14.23
Requires at least: 6.0
Text Domain: camhui-digital-13-5
*/
:root{
  --bg:#01050d;
  --bg2:#031126;
  --panel:#06152b;
  --panel2:#0a2142;
  --text:#f8fbff;
  --muted:#a7b5c9;
  --cyan:#00f0e6;
  --blue:#087dff;
  --cyan2:#72fff5;
  --line:rgba(68,165,255,.30);
  --line2:rgba(0,240,230,.42);
  --shadow:0 30px 90px rgba(0,0,0,.45);
  --max:1400px;
  --r:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 78% 8%,rgba(0,113,255,.14),transparent 30rem),
    radial-gradient(circle at 6% 40%,rgba(0,240,230,.055),transparent 26rem),
    var(--bg);
  color:var(--text);
  font-family:Inter,Arial,Helvetica,sans-serif;
  overflow-x:hidden;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.12;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,#000,transparent 82%);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.shell{width:min(var(--max),calc(100% - 64px));margin:auto;position:relative;z-index:2}
.gradient{
  background:linear-gradient(90deg,var(--cyan2),var(--cyan),#36a3ff);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.eyebrow{color:var(--cyan);font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:800;margin-bottom:18px}
h1,h2,h3,p{margin-top:0}
.btn{
  min-height:52px;padding:0 25px;border-radius:999px;border:1px solid var(--line2);
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-size:14px;font-weight:800;transition:.2s;cursor:pointer
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(100deg,#09efe4,#13bff0 55%,#0a80ff);
  color:#00121b;border:0;box-shadow:0 18px 42px rgba(0,220,235,.24)
}
.btn-dark{background:rgba(2,10,25,.58);color:white}
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(1,5,13,.78);backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(68,165,255,.13)
}
.nav-inner{height:82px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand img{width:125px;height:auto}
.nav-links{display:flex;align-items:center;gap:28px;font-size:13px;color:#d4deeb}
.nav-links a{position:relative}
.nav-links a:not(.btn):hover{color:white}
.nav-links a.active:after{content:"";position:absolute;left:0;right:0;bottom:-18px;height:2px;background:var(--cyan)}
.menu-btn{display:none;background:none;border:0;color:white;font-size:28px}

/* HERO – matched to approved reference */
.hero{
  position:relative;overflow:hidden;
  padding:55px 0 28px;
  background:
    radial-gradient(circle at 72% 25%,rgba(0,123,255,.19),transparent 27rem),
    radial-gradient(circle at 48% 38%,rgba(0,240,230,.07),transparent 26rem),
    linear-gradient(180deg,#01050d 0%,#021028 72%,#010711 100%);
}
.hero:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 84% 16%,rgba(55,152,255,.8) 0 1px,transparent 2px),
    radial-gradient(circle at 69% 12%,rgba(0,240,230,.55) 0 1px,transparent 2px),
    radial-gradient(circle at 94% 38%,rgba(0,110,255,.7) 0 1px,transparent 2px);
  background-size:151px 143px,187px 171px,213px 191px;
  opacity:.45
}
.hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:42px;align-items:center}
.hero-copy{padding-left:18px}
.hero h1{
  font-size:clamp(58px,6.7vw,92px);
  line-height:.96;letter-spacing:-5.5px;font-weight:900;
  margin:0 0 26px;max-width:650px
}
.hero-copy>p{
  color:#c1ccdc;font-size:18px;line-height:1.68;max-width:560px;margin-bottom:28px
}
.actions{display:flex;gap:16px;flex-wrap:wrap}
.hero-stats{display:flex;gap:0;margin-top:38px;max-width:580px}
.hero-stat{min-width:150px;padding-right:28px;margin-right:28px;border-right:1px solid rgba(155,192,235,.36)}
.hero-stat:last-child{border-right:0;margin-right:0}
.hero-stat b{display:block;font-size:25px;line-height:1;color:white}
.hero-stat small{display:block;color:#9facbf;margin-top:9px;font-size:12px}
.hero-stat .stat-icon{color:var(--cyan);font-size:21px;margin-right:8px}

/* Exact graphic cropped from the approved generated design */
.hero-art{
  min-height:575px;
  position:relative;
  display:flex;align-items:center;justify-content:center
}
.hero-art-card{
  width:100%;height:575px;border-radius:0;
  background-image:url('assets/hero-laptop-neon.jpg');
  background-size:cover;background-position:center;
  background-repeat:no-repeat;
  filter:drop-shadow(0 20px 65px rgba(0,83,255,.23));
  position:relative
}
.hero-art-card:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#01050d 0%,transparent 15%,transparent 100%);
  pointer-events:none
}

/* partners exact crop */
.partner-wrap{padding:0 0 15px}


/* METHOD */
.method-shell{
  margin-top:12px;padding:20px 26px 28px;border:1px solid var(--line);
  border-radius:28px;background:linear-gradient(180deg,rgba(6,21,43,.94),rgba(2,10,25,.82));
  box-shadow:var(--shadow)
}
.method-grid{display:grid;grid-template-columns:1.18fr repeat(4,1fr);gap:16px;align-items:stretch}
.method-intro{padding:20px 18px 12px 8px}
.method-intro h2{font-size:35px;line-height:1.02;letter-spacing:-1.7px;margin:8px 0 14px}
.method-intro p{color:#aab8cb;line-height:1.6;font-size:13px;margin-bottom:20px}
.method-card{
  padding:20px 22px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(145deg,rgba(8,32,66,.86),rgba(3,15,34,.78));
  min-height:210px;position:relative
}
.method-card:not(:last-child):after{
  content:"→";position:absolute;right:-14px;top:44%;z-index:3;color:var(--cyan);font-size:30px
}
.method-no{
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(90,175,255,.45);
  display:grid;place-items:center;font-size:18px;margin-bottom:18px;background:rgba(9,48,91,.7)
}
.method-icon{font-size:30px;color:var(--cyan);margin-bottom:15px}
.method-card h3{font-size:18px;margin-bottom:10px}
.method-card p{font-size:13px;line-height:1.65;color:#afbed1;margin:0}

/* Remaining original sections */
.section{padding:105px 0;position:relative}
.section-head{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:end;margin-bottom:42px}
.section h2{font-size:clamp(40px,5vw,66px);line-height:1.02;letter-spacing:-3px;font-weight:900;margin:0}
.section-head p,.lead{color:var(--muted);font-size:15px;line-height:1.75;margin:0}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{
  padding:28px;min-height:215px;border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(145deg,rgba(7,29,60,.85),rgba(2,12,28,.78));
  box-shadow:0 20px 52px rgba(0,0,0,.25);transition:.2s
}
.card:hover{transform:translateY(-4px);border-color:var(--line2)}
.card-icon{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;color:var(--cyan);border:1px solid var(--line2);background:rgba(0,240,230,.06);font-size:25px;margin-bottom:24px}
.card h3{font-size:18px;margin-bottom:10px}.card p{color:#93a6c1;font-size:13px;line-height:1.65}
.diff{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.benefit{padding:28px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(5,25,53,.84),rgba(2,11,27,.75))}
.benefit b{display:grid;width:44px;height:44px;place-items:center;border-radius:50%;border:1px solid var(--line2);color:var(--cyan);margin-bottom:22px}
.benefit h3{font-size:20px}.benefit p{color:#95a8c2;line-height:1.65;font-size:13px}
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center;padding:44px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(135deg,rgba(7,28,59,.88),rgba(2,11,27,.78))}
.about-art{min-height:360px;border-radius:22px;display:grid;place-items:center;background:radial-gradient(circle,rgba(0,240,230,.17),transparent 58%),#06152b;border:1px solid var(--line2)}
.about-art img{width:250px}
.ticks{list-style:none;padding:0;display:grid;gap:12px;color:#d7e4f4}.ticks li:before{content:"✓";color:var(--cyan);margin-right:11px}
.quotes,.cases,.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quote,.case,.time{padding:28px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(8,31,63,.84),rgba(2,12,29,.76))}
.quote{min-height:240px}.quote-mark{font-size:44px;color:var(--cyan)}.quote p,.case p,.time p{color:#acbbcf;line-height:1.65;font-size:13px}.quote footer{color:#8fa2bc;font-size:12px}.quote footer b{display:block;color:white}
.case{min-height:280px;position:relative}.case small{color:var(--cyan);font-weight:800}.case h3{font-size:25px;margin:50px 0 10px}.case a{position:absolute;left:28px;bottom:24px;color:var(--cyan);font-weight:800;font-size:12px}
.time b{color:var(--cyan);font-size:12px}.time h3{margin:34px 0 8px;font-size:20px}
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}details{border-top:1px solid var(--line)}details:last-child{border-bottom:1px solid var(--line)}summary{padding:22px 0;cursor:pointer;display:flex;justify-content:space-between;list-style:none;font-weight:800}summary:after{content:"+";color:var(--cyan);font-size:24px}details[open] summary:after{content:"−"}details p{color:var(--muted);line-height:1.65;margin:0;padding:0 35px 22px 0}
.cta{padding:92px 0;background:radial-gradient(circle at 13% 50%,rgba(0,240,230,.10),transparent 25rem),radial-gradient(circle at 88% 20%,rgba(0,113,255,.15),transparent 28rem),#031126}
.cta-box{display:grid;grid-template-columns:.9fr 1.1fr;gap:55px;padding:42px;border:1px solid var(--line2);border-radius:28px;background:linear-gradient(135deg,rgba(9,42,91,.85),rgba(2,13,31,.84))}
.form{display:grid;grid-template-columns:1fr 1fr;gap:11px}.form textarea{grid-column:1/-1;min-height:125px}.form input,.form textarea{background:rgba(2,9,23,.70);border:1px solid var(--line);border-radius:13px;color:white;padding:15px;outline:none}.form input:focus,.form textarea:focus{border-color:var(--cyan)}.form .btn{grid-column:1/-1;width:fit-content}.status{grid-column:1/-1;color:var(--cyan);font-size:12px;min-height:18px}
.footer{padding:30px 0;border-top:1px solid var(--line);color:#7d90aa;font-size:11px}.footer-in{display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-in img{width:120px}.footer-links{display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:1100px){
  .nav-links{display:none;position:absolute;top:82px;left:32px;right:32px;flex-direction:column;align-items:stretch;padding:18px;background:#031126;border:1px solid var(--line);border-radius:18px}
  .nav-links.open{display:flex}.menu-btn{display:block}
  .hero-grid{grid-template-columns:1fr}.hero-copy{text-align:center;padding-left:0}.hero-copy>p{margin-left:auto;margin-right:auto}.actions,.hero-stats{justify-content:center}.hero-art{min-height:520px}.hero-art-card{height:520px;background-position:center}
  .method-grid{grid-template-columns:1fr 1fr}.method-intro{grid-column:1/-1;text-align:center}.method-card:after{display:none}
  .section-head,.about,.faq,.cta-box{grid-template-columns:1fr}.cards4{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .shell{width:min(100% - 28px,var(--max))}.nav-inner{height:70px}.brand img{width:105px}.nav-links{top:70px;left:14px;right:14px}
  .hero{padding-top:38px}.hero h1{font-size:49px;letter-spacing:-3px}.hero-copy>p{font-size:16px}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:0}.hero-stat{min-width:0;padding:0 10px;margin:0}.hero-stat b{font-size:20px}.hero-stat small{font-size:10px}
  .hero-art{min-height:360px}.hero-art-card{height:360px;background-size:cover;background-position:center}
  .partner-image{height:72px;border-radius:24px}
  .method-grid,.cards4,.diff,.quotes,.cases,.timeline{grid-template-columns:1fr}.method-shell{padding:18px}.method-card{min-height:auto}
  .section{padding:76px 0}.section h2{font-size:39px;letter-spacing:-2px}.footer-in{flex-direction:column;text-align:center}
  .form{grid-template-columns:1fr}.form textarea{grid-column:1}
}

/* =========================================================
   CAMHUI 8.0 — MATCH FINAL A LA REFERENCIA APROBADA
   ========================================================= */
:root{--max:1180px}
body{background:#010714}
.shell{width:min(var(--max),calc(100% - 42px))}
.nav{background:#010714;border-bottom:0;position:relative}
.nav-inner{height:72px}
.brand img{width:112px}
.nav-links{gap:24px;font-size:11px}
.nav-links .btn{min-height:42px;padding:0 20px}

.hero{padding:0 0 18px;background:
 radial-gradient(circle at 73% 17%,rgba(0,128,255,.17),transparent 25rem),
 radial-gradient(circle at 8% 35%,rgba(0,240,230,.045),transparent 24rem),
 #010714}
.hero-grid{grid-template-columns:.78fr 1.22fr;gap:12px;min-height:410px;align-items:center}
.hero-copy{padding:25px 0 5px 10px;z-index:5}
.eyebrow{font-size:10px;letter-spacing:2px;margin-bottom:12px}
.hero h1{font-size:54px;line-height:.98;letter-spacing:-3px;margin-bottom:17px;max-width:470px}
.hero-copy>p{font-size:13px;line-height:1.55;max-width:450px;margin-bottom:18px;color:#d2d9e4}
.btn{min-height:44px;padding:0 20px;font-size:11px}
.hero-stats{margin-top:20px;max-width:420px}
.hero-stat{min-width:118px;padding-right:17px;margin-right:17px}
.hero-stat b{font-size:20px}.hero-stat small{font-size:9px;margin-top:6px}
.hero-stat .stat-icon{font-size:16px}

.hero-art{min-height:410px;height:410px;margin-right:-55px}
.hero-art-card{
 width:100%;height:410px;
 background-image:url('assets/hero-approved.jpg')!important;
 background-size:cover!important;
 background-position:center!important;
 border-radius:0!important;
 filter:none!important;
}
.hero-art-card:before{
 background:linear-gradient(90deg,#010714 0%,rgba(1,7,20,.55) 7%,transparent 20%)!important
}
.partner-wrap{margin-top:-8px}
.partner-image{
 height:66px;border-radius:22px;
 background:none!important;
 display:flex;align-items:center;justify-content:center;
 border:1px solid rgba(0,144,255,.28);
 background-color:#031225!important;
 position:relative;
}
.partner-image:before{
 content:"MARCAS QUE CONFÍAN EN NOSOTROS";
 position:absolute;top:7px;left:0;right:0;text-align:center;
 font-size:8px;letter-spacing:2px;color:#aab8cb
}
.partner-image:after{
 content:"SHOPIFY     META     GOOGLE     TIKTOK     KLAVIYO";
 white-space:pre;word-spacing:22px;
 font-weight:700;font-size:17px;color:#dbe8f7;
 padding-top:14px
}

.method-shell{margin-top:10px;padding:14px 16px 18px;border-radius:18px;background:#031225}
.method-grid{grid-template-columns:1.05fr repeat(4,1fr);gap:10px}
.method-intro{padding:14px 12px 8px 4px}
.method-intro h2{font-size:25px;letter-spacing:-1px;margin:5px 0 9px}
.method-intro p{font-size:10px;line-height:1.5;margin-bottom:0}
.method-intro .btn{display:none}
.method-card{padding:14px;min-height:155px;border-radius:12px}
.method-no{width:34px;height:34px;font-size:12px;margin-bottom:8px}
.method-icon{font-size:22px;margin-bottom:7px}
.method-card h3{font-size:13px;margin-bottom:6px}
.method-card p{font-size:9px;line-height:1.55}
.method-card:not(:last-child):after{font-size:22px;right:-10px}

.section{padding:34px 0;border-top:1px solid rgba(0,120,255,.20)}
.section-head{grid-template-columns:.72fr 1.28fr;gap:30px;margin-bottom:18px;align-items:start}
.section h2{font-size:27px;line-height:1.04;letter-spacing:-1.3px}
.section-head p,.lead{font-size:10px;line-height:1.55}
.cards4{gap:10px}
.card{padding:15px;min-height:130px;border-radius:12px}
.card-icon{width:36px;height:36px;border-radius:50%;font-size:18px;margin-bottom:10px}
.card h3{font-size:12px;margin-bottom:5px}.card p{font-size:9px;line-height:1.5}

.diff{grid-template-columns:repeat(3,1fr);gap:10px;margin-left:270px;margin-top:-70px}
#beneficios .section-head{width:260px;display:block;margin-bottom:0}
.benefit{padding:14px;border-radius:12px;min-height:118px}
.benefit b{width:34px;height:34px;margin-bottom:8px}
.benefit h3{font-size:12px;margin-bottom:5px}.benefit p{font-size:9px;line-height:1.5}

.about{grid-template-columns:240px 1fr;gap:30px;padding:0;border:0;background:none}
.about-art{
 min-height:190px;border-radius:12px;
 background:url('assets/about-approved.jpg') center/cover no-repeat!important;
 border:1px solid rgba(0,144,255,.30)
}
.about-art img{display:none!important}
.about h2{font-size:26px;max-width:600px}
.ticks{grid-template-columns:1fr 1fr;gap:8px;font-size:10px;margin-top:14px}

.quotes,.cases{gap:10px}
.quote,.case,.time{padding:15px;border-radius:12px}
.quote{min-height:120px}.quote-mark{font-size:28px}.quote p,.case p,.time p{font-size:9px;line-height:1.5}
.quote footer{font-size:9px}
.case{min-height:145px}.case h3{font-size:15px;margin:25px 0 5px}.case a{left:15px;bottom:12px;font-size:9px}
.timeline{gap:10px}.time{min-height:110px}.time h3{font-size:13px;margin:18px 0 5px}.time b{font-size:9px}

.faq{grid-template-columns:250px 1fr;gap:25px}
summary{padding:12px;font-size:10px;border:1px solid rgba(0,144,255,.25);border-radius:8px;margin-bottom:8px;background:#031225}
details{border:0!important}details p{font-size:9px;padding:0 12px 12px}

.cta{padding:32px 0;background:#031225}
.cta-box{grid-template-columns:.8fr 1.2fr;gap:25px;padding:20px;border-radius:14px}
.cta-box h2{font-size:26px}
.form{gap:7px}.form input,.form textarea{padding:11px;border-radius:8px;font-size:10px}.form textarea{min-height:72px}.form .btn{width:100%}
.footer{padding:20px 0}.footer-in img{width:90px}

@media(max-width:900px){
 .hero-grid{grid-template-columns:1fr}.hero-copy{text-align:left}.actions,.hero-stats{justify-content:flex-start}
 .hero-art{margin-right:0;min-height:360px;height:360px}.hero-art-card{height:360px}
 .method-grid{grid-template-columns:1fr 1fr}.method-intro{grid-column:1/-1}
 .diff{margin:0;grid-template-columns:1fr 1fr}#beneficios .section-head{width:auto;display:grid}
}
@media(max-width:620px){
 .shell{width:min(100% - 24px,var(--max))}
 .hero h1{font-size:43px}
 .hero-art{height:280px;min-height:280px}.hero-art-card{height:280px;background-position:center}
 .partner-image:after{font-size:10px;word-spacing:4px}
 .method-grid,.cards4,.diff,.quotes,.cases,.timeline{grid-template-columns:1fr}
 .section-head,.about,.faq,.cta-box{grid-template-columns:1fr}
 .about-art{min-height:220px}.ticks{grid-template-columns:1fr}
}


/* =========================================================
   CAMHUI 8.1 — LEGIBILIDAD
   IMPORTANTE: NO MODIFICA NAV, HERO, IMAGEN DEL ORDENADOR,
   ESFERA, LUCES, MÉTRICAS SUPERIORES NI MARCAS.
   Solo amplía la zona desde MÉTODO CAMHUI hacia abajo.
   ========================================================= */

/* Método: más aire y tipografía */
.method-shell{padding:28px 26px 32px;margin-top:18px}
.method-grid{gap:18px}
.method-intro{padding:20px 18px 14px 6px}
.method-intro .eyebrow{font-size:12px}
.method-intro h2{font-size:34px;line-height:1.08;margin:8px 0 14px}
.method-intro p{font-size:14px;line-height:1.65}
.method-card{padding:24px 22px;min-height:225px}
.method-no{width:44px;height:44px;font-size:15px;margin-bottom:15px}
.method-icon{font-size:28px;margin-bottom:12px}
.method-card h3{font-size:18px;margin-bottom:10px}
.method-card p{font-size:13px;line-height:1.65}

/* Todas las secciones inferiores */
.section{padding:82px 0}
.section-head{gap:55px;margin-bottom:34px}
.section .eyebrow{font-size:12px;letter-spacing:2.4px;margin-bottom:15px}
.section h2{font-size:clamp(38px,4.1vw,55px);line-height:1.06;letter-spacing:-2px}
.section-head p,.section .lead{font-size:16px;line-height:1.72}

/* Servicios */
.cards4{gap:20px}
.card{padding:30px 27px;min-height:230px;border-radius:18px}
.card-icon{width:52px;height:52px;font-size:25px;margin-bottom:22px}
.card h3{font-size:20px;margin-bottom:12px}
.card p{font-size:14px;line-height:1.68}

/* Diferencia: deja de estar comprimida lateralmente */
#beneficios .section-head{width:auto;display:grid;margin-bottom:34px}
.diff{margin:0;grid-template-columns:repeat(3,1fr);gap:20px}
.benefit{padding:29px 27px;min-height:220px;border-radius:18px}
.benefit b{width:46px;height:46px;margin-bottom:18px;font-size:15px}
.benefit h3{font-size:20px;margin-bottom:11px}
.benefit p{font-size:14px;line-height:1.68}

/* Sobre CAMHUI */
.about{grid-template-columns:.82fr 1.18fr;gap:52px;padding:38px}
.about-art{min-height:360px}
.about h2{font-size:clamp(38px,4vw,54px);max-width:760px}
.about .lead{font-size:16px;line-height:1.72;margin-top:20px}
.ticks{grid-template-columns:1fr;gap:14px;font-size:15px;margin-top:24px}

/* Testimonios */
.quotes{gap:20px}
.quote{padding:28px;min-height:245px}
.quote-mark{font-size:46px}
.quote p{font-size:15px;line-height:1.7}
.quote footer{font-size:13px;line-height:1.5}

/* Casos */
.cases{gap:20px}
.case{padding:28px;min-height:275px}
.case small{font-size:11px}
.case h3{font-size:25px;line-height:1.15;margin:42px 0 12px}
.case p{font-size:14px;line-height:1.65}
.case a{left:28px;bottom:24px;font-size:12px}

/* Proceso */
.timeline{gap:20px}
.time{padding:28px;min-height:205px}
.time b{font-size:11px}
.time h3{font-size:21px;line-height:1.2;margin:30px 0 10px}
.time p{font-size:14px;line-height:1.65}

/* FAQ */
.faq{grid-template-columns:.72fr 1.28fr;gap:55px}
summary{padding:20px 22px;font-size:15px;border-radius:12px;margin-bottom:12px}
details p{font-size:14px;line-height:1.65;padding:2px 22px 22px}

/* Contacto */
.cta{padding:82px 0}
.cta-box{gap:50px;padding:42px;border-radius:24px}
.cta-box .eyebrow{font-size:12px}
.cta-box h2{font-size:clamp(38px,4vw,54px);line-height:1.07}
.cta-box .lead{font-size:16px;line-height:1.7}
.form{gap:12px}
.form input,.form textarea{padding:16px;font-size:14px;border-radius:12px}
.form textarea{min-height:130px}
.form .btn{min-height:52px;font-size:14px}

/* Tablet */
@media(max-width:900px){
  .method-grid{grid-template-columns:1fr 1fr}
  .method-intro{grid-column:1/-1}
  .section-head,.about,.faq,.cta-box{grid-template-columns:1fr}
  .cards4,.diff{grid-template-columns:1fr 1fr}
  .about-art{min-height:330px}
}

/* Móvil: prioridad absoluta a lectura */
@media(max-width:620px){
  .method-shell{padding:24px 18px}
  .method-grid,.cards4,.diff,.quotes,.cases,.timeline{grid-template-columns:1fr}
  .method-intro h2{font-size:31px}
  .method-card{min-height:auto}
  .section{padding:64px 0}
  .section h2,.about h2,.cta-box h2{font-size:36px}
  .section-head p,.section .lead,.about .lead,.cta-box .lead{font-size:16px}
  .card,.benefit,.quote,.case,.time{min-height:auto}
  .card h3,.benefit h3{font-size:20px}
  .card p,.benefit p,.quote p,.case p,.time p{font-size:15px}
  .about{padding:22px}
  .ticks{font-size:15px}
  summary{font-size:15px}
  details p{font-size:15px}
}

/* 9.0 editable image */
.about-art{background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important}


/* =========================================================
   CAMHUI 9.1 — CORRECCIONES RESPONSIVE Y LOGO
   ========================================================= */

/* 1. LOGO SUPERIOR: nunca se recorta */
.nav{overflow:visible!important}
.nav-inner{overflow:visible!important;min-height:82px!important}
.brand{
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  overflow:visible!important;
  padding:4px 0!important;
}
.brand img{
  width:132px!important;
  height:auto!important;
  max-width:none!important;
  max-height:68px!important;
  object-fit:contain!important;
  object-position:left center!important;
  overflow:visible!important;
  clip-path:none!important;
}

/* 2. MARCAS: una sola fila, sin imágenes rotas ni texto duplicado */
.partner-wrap{overflow:visible!important}
.partner-image{
  width:100%!important;
  height:auto!important;
  min-height:78px!important;
  padding:27px 22px 14px!important;
  border-radius:24px!important;
  background:#031225!important;
  background-image:none!important;
  overflow:visible!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.partner-image:before{
  content:"MARCAS QUE CONFÍAN EN NOSOTROS"!important;
  position:absolute!important;
  top:9px!important;
  left:0!important;
  right:0!important;
  display:block!important;
  text-align:center!important;
  font-size:9px!important;
  line-height:1!important;
  letter-spacing:2px!important;
  color:#aab8cb!important;
}
.partner-image:after{
  content:"SHOPIFY   ·   META   ·   GOOGLE   ·   TIKTOK   ·   KLAVIYO"!important;
  display:block!important;
  position:static!important;
  width:100%!important;
  text-align:center!important;
  white-space:normal!important;
  word-spacing:normal!important;
  font-size:17px!important;
  line-height:1.5!important;
  color:#e6eef9!important;
  font-weight:800!important;
  padding:0!important;
}

/* 3. HERO EN MÓVIL: mostrar la composición completa, no recortar los laterales */
@media(max-width:900px){
  .hero-grid{
    grid-template-columns:1fr!important;
    gap:20px!important;
  }
  .hero-copy{
    padding-left:0!important;
    text-align:left!important;
  }
  .hero-art{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    overflow:visible!important;
  }
  .hero-art-card{
    width:100%!important;
    height:auto!important;
    aspect-ratio:976 / 580!important;
    background-size:contain!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
    background-color:#010714!important;
  }
  .hero-art-card:before{display:none!important}
}

/* 4. MÓVIL ESTRECHO: márgenes seguros y navegación sin cortes */
@media(max-width:620px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  .shell{
    width:calc(100% - 28px)!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .nav-inner{
    height:auto!important;
    min-height:74px!important;
    padding:5px 0!important;
  }
  .brand img{
    width:118px!important;
    max-height:62px!important;
  }
  .nav-links{
    left:14px!important;
    right:14px!important;
    width:auto!important;
    max-width:calc(100vw - 28px)!important;
  }
  .hero{
    padding-left:0!important;
    padding-right:0!important;
  }
  .hero-copy{
    width:100%!important;
    max-width:100%!important;
  }
  .hero h1{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
  .hero-art{
    width:100%!important;
    max-width:100%!important;
  }
  .hero-art-card{
    width:100%!important;
    max-width:100%!important;
    aspect-ratio:976 / 580!important;
    background-size:contain!important;
    background-position:center center!important;
  }
  .partner-image{
    min-height:86px!important;
    padding:28px 12px 13px!important;
  }
  .partner-image:before{
    font-size:8px!important;
    letter-spacing:1.4px!important;
  }
  .partner-image:after{
    font-size:12px!important;
    line-height:1.65!important;
    content:"SHOPIFY  ·  META  ·  GOOGLE  ·  TIKTOK  ·  KLAVIYO"!important;
  }

  /* Evitar cualquier elemento ancho que empuje la página */
  .method-shell,.method-grid,.section,.section-head,.cards4,.diff,.about,
  .quotes,.cases,.timeline,.faq,.cta-box,.form,.footer-in{
    min-width:0!important;
    max-width:100%!important;
  }
  img,svg,iframe{max-width:100%!important;height:auto}
}


/* =========================================================
   CAMHUI 9.2 — MOBILE FIX REAL
   Corrige: desbordamiento lateral + marcas duplicadas
   ========================================================= */

/* El texto "Marcas que confían..." se muestra UNA sola vez */
.partner-image:before{
  content:"MARCAS QUE CONFÍAN EN NOSOTROS"!important;
}
.partner-image:after{
  content:"SHOPIFY  ·  META  ·  GOOGLE  ·  TIKTOK  ·  KLAVIYO"!important;
}

/* Seguridad global contra desbordamiento horizontal */
html,body{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}
*,*:before,*:after{min-width:0}
.shell,
.hero,
.hero-grid,
.hero-copy,
.hero-art,
.hero-art-card,
.partner-wrap,
.partner-image,
.method-shell,
.method-grid,
.section,
.section-head,
.cards4,
.diff,
.about,
.quotes,
.cases,
.timeline,
.faq,
.cta,
.cta-box,
.form,
.footer-in{
  max-width:100%!important;
}

/* Móvil */
@media(max-width:620px){

  .shell{
    width:calc(100% - 24px)!important;
    max-width:calc(100% - 24px)!important;
    margin-left:12px!important;
    margin-right:12px!important;
  }

  /* Texto superior: nunca sale del ancho */
  .hero-copy,
  .hero-copy>p,
  .hero h1{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
  }

  .hero-copy>p{
    font-size:16px!important;
    line-height:1.55!important;
    padding-right:0!important;
  }

  /* Botones adaptables */
  .actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    width:100%!important;
  }
  .actions .btn{
    width:100%!important;
    max-width:100%!important;
  }

  /* Métricas: el origen principal del ancho extra */
  .hero-stats{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%!important;
    max-width:100%!important;
    gap:0!important;
    margin-top:26px!important;
  }
  .hero-stat{
    min-width:0!important;
    width:auto!important;
    max-width:100%!important;
    padding:0 8px!important;
    margin:0!important;
    border-right:1px solid rgba(155,192,235,.30)!important;
    overflow:hidden!important;
  }
  .hero-stat:last-child{border-right:0!important}
  .hero-stat b{
    display:block!important;
    font-size:18px!important;
    white-space:nowrap!important;
  }
  .hero-stat .stat-icon{
    font-size:13px!important;
    margin-right:4px!important;
  }
  .hero-stat small{
    display:block!important;
    font-size:9px!important;
    line-height:1.25!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  /* Imagen del hero completa, centrada */
  .hero-art{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .hero-art-card{
    width:100%!important;
    max-width:100%!important;
    aspect-ratio:auto!important;
    height:300px!important;
    background-size:contain!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-color:#010714!important;
  }

  /* Marcas: una sola cabecera y fila limpia */
  .partner-wrap{
    margin-top:4px!important;
  }
  .partner-image{
    min-height:92px!important;
    padding:30px 10px 14px!important;
    overflow:hidden!important;
  }
  .partner-image:before{
    top:10px!important;
    font-size:8px!important;
    letter-spacing:1.2px!important;
  }
  .partner-image:after{
    font-size:11px!important;
    line-height:1.55!important;
    white-space:normal!important;
  }

  /* Asegurar que las secciones inferiores tampoco ensanchan */
  .method-grid,
  .cards4,
  .diff,
  .quotes,
  .cases,
  .timeline,
  .section-head,
  .about,
  .faq,
  .cta-box,
  .form{
    width:100%!important;
    max-width:100%!important;
  }
}


/* =========================================================
   CAMHUI 9.4 — PÁGINA DE GRACIAS
   ========================================================= */
.thank-page{min-height:calc(100vh - 82px)}
.thank-hero{
  min-height:calc(100vh - 82px);
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:70px 0;
  background:
    radial-gradient(circle at 78% 16%,rgba(10,123,255,.24),transparent 27rem),
    radial-gradient(circle at 18% 65%,rgba(0,240,230,.10),transparent 24rem),
    linear-gradient(180deg,#01050d,#031126 72%,#010714);
}
.thank-hero:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:72px 72px;
}
.thank-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.42}
.thank-orb-a{width:320px;height:320px;background:#057dff;right:-80px;top:40px}
.thank-orb-b{width:280px;height:280px;background:#08efe6;left:-80px;bottom:20px}
.thank-card{
  position:relative;
  width:min(820px,100%);
  margin:0 auto;
  text-align:center;
  padding:62px 58px;
  border:1px solid rgba(8,239,230,.34);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(8,31,65,.90),rgba(2,12,29,.86));
  box-shadow:0 35px 100px rgba(0,0,0,.48),0 0 55px rgba(0,120,255,.12);
  backdrop-filter:blur(18px);
}
.thank-logo-wrap{
  width:160px;height:94px;margin:0 auto 22px;
  display:flex;align-items:center;justify-content:center;
}
.thank-logo-wrap img{width:150px;height:auto;object-fit:contain}
.thank-card .eyebrow{margin-bottom:16px}
.thank-card h1{
  max-width:700px;
  margin:0 auto 24px;
  font-size:clamp(42px,5vw,66px);
  line-height:1.02;
  letter-spacing:-2.8px;
}
.thank-card>p{
  max-width:650px;
  margin:0 auto;
  color:#afbdd1;
  font-size:17px;
  line-height:1.72;
}
.thank-checks{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin:32px 0;
}
.thank-checks div{
  display:flex;align-items:center;gap:9px;
  padding:12px 17px;
  border:1px solid rgba(91,177,255,.28);
  border-radius:999px;
  background:rgba(2,11,28,.55);
  color:#dce8f7;
  font-size:13px;
}
.thank-checks span{
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(8,239,230,.12);
  color:#08efe6;font-weight:900;
}
@media(max-width:620px){
  .thank-hero{padding:32px 0;align-items:flex-start}
  .thank-card{padding:40px 22px;border-radius:22px}
  .thank-logo-wrap{width:135px;height:78px}
  .thank-logo-wrap img{width:130px}
  .thank-card h1{font-size:40px;letter-spacing:-2px}
  .thank-card>p{font-size:16px}
  .thank-checks{display:grid;grid-template-columns:1fr}
  .thank-checks div{justify-content:flex-start;border-radius:14px}
  .thank-card .btn{width:100%}
}


/* =========================================================
   CAMHUI 13.2 — FINAL DEPURADO
   Un solo CAM · chat propio · estados validados
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden}
iframe[src*="chatbase"],iframe[title*="chatbase" i],iframe[title*="chatbot" i],#chatbase-bubble-button,[data-chatbase-bubble-button]{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}

/* Panel estable */
#cam13-panel{position:fixed;right:18px;bottom:18px;z-index:2147483300;width:min(410px,calc(100vw - 28px));height:min(560px,calc(100dvh - 270px));min-height:390px;display:none;flex-direction:column;overflow:hidden;border:1px solid rgba(0,240,230,.66);border-radius:22px;background:rgba(2,8,16,.99);box-shadow:0 28px 90px rgba(0,0,0,.62)}
#cam13-panel.is-open{display:flex!important}
.cam13-head{min-height:72px;display:flex;align-items:center;gap:12px;padding:10px 16px;background:linear-gradient(100deg,#16ede4,#27d8ee);color:#001015;position:relative;z-index:2}
.cam13-brand{flex:1;min-width:0}.cam13-brand strong{display:block;font-size:18px}.cam13-brand span{display:block;font-size:12px;opacity:.78;margin-top:2px}
#cam13-close{width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:#001015;font-size:27px;cursor:pointer;flex:0 0 38px}
#cam13-messages{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px 18px;scrollbar-width:thin;scrollbar-color:#66737d transparent}
.cam13-row{display:flex;margin:0 0 12px}.cam13-row.user{justify-content:flex-end}.cam13-bubble{max-width:84%;padding:11px 13px;border-radius:16px;background:#171b20;color:#f7fbff;font-size:14px;line-height:1.48;white-space:pre-wrap;overflow-wrap:anywhere}.cam13-row.user .cam13-bubble{background:linear-gradient(135deg,#7afff5,#12e7df);color:#001216;font-weight:700}
#cam13-actions{display:flex;flex-wrap:wrap;gap:7px;padding:0 14px 10px}.cam13-chip{border:1px solid rgba(0,240,230,.43);border-radius:999px;background:rgba(0,240,230,.07);color:#e9ffff;padding:8px 10px;font-size:12px;cursor:pointer}.cam13-chip:hover{background:rgba(0,240,230,.15)}
#cam13-form{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:8px;padding:10px;border-top:1px solid rgba(0,240,230,.22);background:#040a11;position:relative;z-index:2}
#cam13-input{min-width:0;height:48px;border:1px solid rgba(255,255,255,.15);border-radius:14px;background:#111820;color:#fff;outline:none;padding:0 13px}#cam13-input:focus{border-color:#00f0e6;box-shadow:0 0 0 3px rgba(0,240,230,.08)}#cam13-send{width:48px;height:48px;border:0;border-radius:50%;background:#00f0e6;color:#001216;font-size:24px;font-weight:900;cursor:pointer}

/* ÚNICO CAM. El contenedor recorta el lienzo y evita que invada el chat. */
.cam-assistant{position:fixed;right:14px;bottom:54px;z-index:2147483400;display:flex;align-items:flex-end;gap:8px;cursor:pointer;user-select:none;touch-action:manipulation}
.cam-stage{width:184px;height:188px;border:0;padding:0;background:transparent;display:block;overflow:hidden;cursor:pointer;filter:drop-shadow(0 15px 26px rgba(0,0,0,.44));border-radius:8px}
.cam-stage img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;background:transparent!important;transform:scale(2.05);transform-origin:50% 82%}
.cam-label{margin:0 0 14px 0;padding:10px 13px;border:1px solid rgba(0,240,230,.45);border-radius:14px;background:#06152b;box-shadow:0 14px 36px rgba(0,0,0,.30);white-space:nowrap;pointer-events:none}.cam-label strong,.cam-label span{display:block}.cam-label strong{font-size:12px;letter-spacing:.12em;color:#fff}.cam-label span{font-size:11px;color:#9fb2c9;margin-top:2px}
body.cam13-open .cam-label{display:none}

@media(max-width:760px){
  #cam13-panel{left:8px;right:8px;bottom:8px;width:auto;height:min(64dvh,560px);min-height:370px;border-radius:19px}
  .cam-assistant{right:4px;bottom:54px}.cam-stage{width:132px;height:142px}.cam-stage img{transform:scale(1.92);transform-origin:50% 82%}.cam-label{display:none}
  .cam13-bubble{max-width:88%;font-size:14px}
}

/* 13.4: el mortal usa su escala natural; no hereda el zoom de los GIF. */
body.cam-mortal-playing .cam-stage img{
  transform:scale(1.05)!important;
  transform-origin:50% 85%!important;
}
body.cam-mortal-playing .cam-stage{
  overflow:visible!important;
}
body.cam-transitioning #cam-assistant{
  visibility:hidden!important;
}


/* CAMHUI 14 — Chatbase antiguo completamente oculto */
iframe[src*="chatbase" i], iframe[title*="chatbase" i], iframe[title*="chatbot" i],
#chatbase-bubble-button, #chatbase-bubble-window, [data-chatbase-bubble-button],
[id*="chatbase" i], [class*="chatbase" i], [data-testid*="chatbase" i],
.chatbot-bubble-button, .chatbot-bubble-window {
  display:none !important; visibility:hidden !important; opacity:0 !important;
  pointer-events:none !important; width:0 !important; height:0 !important;
}




/* =========================================================
   CAMHUI 14.7 — CAM ESTABLE
   - sin <img> del robot
   - sin icono roto
   - doble capa CSS: espera permanente + movimiento
   - tamaño fijo grande
   - chat abre inmediatamente
   ========================================================= */

.cam-assistant{
  position:fixed!important;
  right:14px!important;
  bottom:54px!important;
  z-index:2147483400!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:6px!important;
  cursor:pointer!important;
  user-select:none!important;
  touch-action:manipulation!important;
}

.cam-stage{
  position:relative!important;
  order:1!important;
  width:184px!important;
  height:188px!important;
  display:block!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:drop-shadow(0 15px 26px rgba(0,0,0,.44))!important;
  cursor:pointer!important;
}

/* Espera SIEMPRE debajo: si una animación falla, CAM no desaparece. */
.cam-stage::before,
.cam-stage::after{
  content:"";
  position:absolute;
  inset:-56px -70px -44px -70px;
  background-repeat:no-repeat;
  background-position:50% 82%;
  background-size:205% auto;
  pointer-events:none;
  transition:opacity .22s ease;
}

.cam-stage::before{
  z-index:1;
  background-image:var(--cam-idle);
  opacity:1;
}

.cam-stage::after{
  z-index:2;
  background-image:var(--cam-action);
  opacity:0;
}

.cam-stage.cam-action-active::after{ opacity:1; }
.cam-stage.cam-action-active::before{ opacity:0; }

.cam-label{
  order:2!important;
  min-width:156px!important;
  margin:0!important;
  padding:10px 13px!important;
  align-self:center!important;
  text-align:center!important;
  border:1px solid rgba(0,240,230,.45)!important;
  border-radius:14px!important;
  background:#06152b!important;
  box-shadow:0 14px 36px rgba(0,0,0,.30)!important;
  white-space:nowrap!important;
  pointer-events:none!important;
}
.cam-label strong,.cam-label span{display:block!important}
.cam-label strong{font-size:12px!important;letter-spacing:.12em!important;color:#fff!important}
.cam-label span{font-size:11px!important;color:#9fb2c9!important;margin-top:2px!important}
body.cam13-open .cam-label{display:none!important}

/* Panel siempre por encima y clicable. */
#cam13-panel{
  z-index:2147483500!important;
}
#cam13-panel.is-open{
  display:flex!important;
  pointer-events:auto!important;
}

/* Nunca mostrar restos de imágenes antiguas de CAM. */
#cam-motion,
#cam-action-motion{
  display:none!important;
}

/* Chatbase antiguo fuera. */
iframe[src*="chatbase" i],
iframe[title*="chatbase" i],
#chatbase-bubble-button,
#chatbase-bubble-window,
[data-chatbase-bubble-button],
[id*="chatbase" i],
[class*="chatbase" i],
[data-testid*="chatbase" i],
.chatbot-bubble-button,
.chatbot-bubble-window{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

@media(max-width:760px){
  .cam-assistant{
    right:5px!important;
    bottom:48px!important;
  }
  .cam-stage{
    width:150px!important;
    height:154px!important;
  }
  .cam-stage::before,
  .cam-stage::after{
    inset:-45px -58px -38px -58px;
    background-size:205% auto;
  }
  .cam-label{
    display:block!important;
    min-width:136px!important;
    padding:8px 10px!important;
  }
  body.cam13-open .cam-label{display:none!important}
}






/* =========================================================
   CAMHUI 14.12 — UNA SOLA CAPA, SIN DOBLE ROBOT
   ========================================================= */

/* CAM usa UNA sola imagen de fondo ya precargada.
   No hay pose debajo + animación encima. */
.cam-stage{
  position:relative!important;
  width:184px!important;
  height:188px!important;
  border:0!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  cursor:pointer!important;
  opacity:1!important;
  transition:opacity .18s ease!important;
}

.cam-stage::before{
  content:"";
  position:absolute;
  inset:-56px -70px -44px -70px;
  background-image:var(--cam-current)!important;
  background-repeat:no-repeat!important;
  background-position:50% 82%!important;
  background-size:205% auto!important;
  opacity:1!important;
  pointer-events:none!important;
}

.cam-stage.cam-soft-swap{opacity:.82!important}

/* Ya no existe segunda capa visual. */
.cam-stage::after{display:none!important}

@media(max-width:760px){
  .cam-stage{
    width:150px!important;
    height:154px!important;
  }
  .cam-stage::before{
    inset:-45px -58px -38px -58px;
    background-size:205% auto!important;
  }
}


/* CAMHUI 14.13 — eliminar restos visuales del robot antiguo */
img[alt="CAM"],
img[alt^="CAM "],
img[id*="cam-motion" i],
img[class*="cam-motion" i],
img[src=""],
img:not([src]){
  display:none!important;
  visibility:hidden!important;
}


/* =========================================================
   CAMHUI 14.14 — MOVIMIENTOS PRECARGADOS Y FLUIDOS
   ========================================================= */
.cam-stage{
  opacity:1!important;
  transition:opacity .16s ease!important;
}
.cam-stage.cam-transition{
  opacity:.72!important;
}
.cam-stage::after{
  display:none!important;
}


/* =========================================================
   CAMHUI 14.15 — GIF REINICIA DESDE FOTOGRAMA 1
   ========================================================= */
.cam-stage{
  transition:opacity .12s ease!important;
}
.cam-stage.cam-transition{
  opacity:.86!important;
}


/* CAMHUI 14.16 — soporte para secuencia final en MP4 */
#cam-video-layer{
  position:absolute;
  inset:-56px -70px -44px -70px;
  width:calc(100% + 140px);
  height:calc(100% + 100px);
  object-fit:contain;
  object-position:50% 82%;
  pointer-events:none;
  background:transparent!important;
  z-index:3;
}
.cam-stage.cam-video-mode::before{opacity:0!important}
@media(max-width:760px){
  #cam-video-layer{
    inset:-45px -58px -38px -58px;
    width:calc(100% + 116px);
    height:calc(100% + 83px);
  }
}

/* CAMHUI 14.17 */
#cam-video-layer{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:20!important;
}


/* CAMHUI 14.22 — CTA superior con degradado de marca */
.site-header .cta,
.site-header .btn,
.site-header a[href*="#contacto"],
header .cta,
header a[href*="#contacto"]{
  background: linear-gradient(135deg, #10d9cf 0%, #1597ff 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(35, 226, 221, .78) !important;
  box-shadow: 0 8px 28px rgba(21, 151, 255, .22) !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.site-header .cta:hover,
.site-header .btn:hover,
.site-header a[href*="#contacto"]:hover,
header .cta:hover,
header a[href*="#contacto"]:hover{
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 10px 34px rgba(16, 217, 207, .32) !important;
}


/* CAMHUI 14.23 — CTA REAL DEL MENÚ SUPERIOR */
.nav .nav-links a.btn.btn-dark[href="#contacto"],
.nav .nav-links .btn.btn-dark{
  background: linear-gradient(135deg, #17ddd1 0%, #0bb7ef 48%, #287cff 100%) !important;
  background-color: #12bfe5 !important;
  color: #ffffff !important;
  border: 1px solid rgba(64, 229, 232, .85) !important;
  box-shadow:
    0 8px 24px rgba(16, 193, 232, .28),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  font-weight: 800 !important;
}

.nav .nav-links a.btn.btn-dark[href="#contacto"]:hover,
.nav .nav-links .btn.btn-dark:hover{
  background: linear-gradient(135deg, #23eee0 0%, #16c4ff 48%, #398cff 100%) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow:
    0 12px 32px rgba(16, 193, 232, .38),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}


/* =========================================================
   CAMHUI 14.25 — FIX RETRATO MÓVIL DEFINITIVO
   - El bloque 14.24 anterior quedó escrito con saltos escapados
     y el navegador no lo interpretaba como CSS real.
   - CAM queda visible y dentro del viewport en móvil vertical.
   ========================================================= */
@media (max-width:760px){
  html, body{
    overflow-x:hidden!important;
  }

  #cam-assistant.cam-assistant,
  .cam-assistant{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    position:fixed!important;
    left:auto!important;
    top:auto!important;
    right:max(4px, env(safe-area-inset-right))!important;
    bottom:max(24px, env(safe-area-inset-bottom))!important;
    width:150px!important;
    max-width:150px!important;
    min-width:0!important;
    height:auto!important;
    transform:none!important;
    z-index:2147483640!important;
  }

  #cam-stage.cam-stage,
  .cam-stage{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    width:150px!important;
    height:154px!important;
    min-width:150px!important;
    min-height:154px!important;
    max-width:150px!important;
    margin:0!important;
    pointer-events:auto!important;
    transform:none!important;
  }

  .cam-stage::before{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    content:""!important;
    inset:-36px -48px -30px -48px!important;
    background-size:195% auto!important;
    background-position:50% 82%!important;
  }

  /* La regla antigua ocultaba CAM durante cam-transitioning.
     En móvil nunca debe poder dejarlo invisible. */
  body.cam-transitioning #cam-assistant,
  body.cam-transitioning .cam-assistant{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
  }

  .cam-label{
    display:none!important;
  }
}

/* Móviles muy estrechos (iPhone SE y similares). */
@media (max-width:390px){
  #cam-assistant.cam-assistant,
  .cam-assistant{
    right:max(2px, env(safe-area-inset-right))!important;
    width:138px!important;
    max-width:138px!important;
  }
  #cam-stage.cam-stage,
  .cam-stage{
    width:138px!important;
    min-width:138px!important;
    max-width:138px!important;
    height:146px!important;
    min-height:146px!important;
  }
  .cam-stage::before{
    inset:-32px -44px -28px -44px!important;
    background-size:192% auto!important;
  }
}