/* Formatos propios por servicio (5 oct 2026). Solo en las páginas que los usan (ronda15.py). */

/* Diseño web: webs reales de clientes */
.sec--webs .webs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:30px}
.web{display:block;border-radius:22px;overflow:hidden;background:#fff;color:#001744;text-decoration:none;box-shadow:0 18px 40px rgba(0,23,68,.12);transition:transform .3s,box-shadow .3s}
.web:hover{transform:translateY(-4px);box-shadow:0 26px 54px rgba(0,23,68,.2)}
.web:focus-visible{outline:3px solid #001744;outline-offset:3px}
.web__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#eef1f6;border-bottom:1px solid #dde3ee}
.web__bar i{width:9px;height:9px;border-radius:50%;background:#c6cdd9}
.web__bar span{margin-left:10px;padding:3px 12px;border-radius:999px;background:#fff;font-size:12px;color:#4a5578}
.web img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.web__t{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:14px 18px 16px}
.web__t b{font-size:17px;color:#001744}
.web__t span{font-size:14px;color:#4a5578}
.web__t .web__go{margin-left:auto;font-weight:700;color:#001744}
@media (max-width:700px){.sec--webs .webs{grid-template-columns:1fr}}

/* Google Ads: la calculadora en la cabecera y la escena en su propia sección */
.hero--calc .svc-hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:start}
.hero--calc .svc-hero>.dmtool{grid-template-columns:1fr;gap:18px;margin-top:22px;padding:clamp(20px,2.4vw,30px);border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 60px rgba(0,0,0,.28)}
.hero--calc .dmtool h2{font-size:clamp(22px,2.1vw,30px);margin:4px 0 8px}
@media (max-width:900px){.hero--calc .svc-hero{grid-template-columns:1fr}}
.sec--scene .scene{margin-top:26px}
.sec--scene .scene__cap{color:#33405f}

/* CRM: los 14 días a todo el ancho dentro de la cabecera */
.hero--tl .svc-hero>.dmtool{grid-column:1/-1;margin-top:clamp(10px,2vw,28px);padding:clamp(20px,2.6vw,34px);border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16)}

/* Chatbots: el simulador a todo el ancho, chat y aviso al dueño lado a lado */
.hero--chat .svc-hero{grid-template-columns:1fr;gap:30px}
.hero--chat .svc-hero__txt{max-width:780px}
.hero--chat .cs-hero{align-items:stretch}
.hero--chat .cs-hero #chatsim{max-width:1000px;margin:0}
.hero--chat .cs-hero .cs__grid{grid-template-columns:minmax(0,430px) 1fr;gap:26px;align-items:stretch}
.hero--chat .cs-hero .cs__owner{padding:24px 26px;border-radius:26px;background:rgba(255,255,255,.06)!important}
.hero--chat .cs-hero .cs__ownh{font-size:17px;margin-bottom:10px}
.hero--chat .cs-hero .cs__owner dl{font-size:15px;gap:8px 16px}
@media (max-width:900px){.hero--chat .cs-hero .cs__grid{grid-template-columns:1fr}}

/* Instagram: el QR del DM real en la cabecera, bajo los botones */
.hero--ig .svc-hero__txt .dmtool--igdemo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;max-width:540px;margin-top:30px;padding:16px 20px 16px 16px;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.hero--ig .dmtool--igdemo .tl-a{order:2}
.hero--ig .dmtool--igdemo .tl-b{order:1;padding:0}
.hero--ig .dmtool--igdemo h2{font-size:21px;margin:2px 0 6px}
.hero--ig .dmtool--igdemo .tl-a>p:not(.tl-k){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;font-size:14px}
.hero--ig .dmtool--igdemo .ig-steps{display:none}
.hero--ig .dmtool--igdemo .ig-qr img{width:112px;border-radius:10px;box-shadow:0 0 0 6px #fff,0 0 0 9px #C1D72E}
.hero--ig .dmtool--igdemo .ig-qr p{display:none}
@media (max-width:900px){.hero--ig .svc-hero__txt .dmtool--igdemo{grid-template-columns:1fr}.hero--ig .dmtool--igdemo .tl-b{display:none}}

/* Contenido: el feed de reels (en escritorio se mueve al pasar el ratón; al tocar, suena) */
.sec--feed .feed{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:30px}
.reel{position:relative;margin:0;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#0b1f45;box-shadow:0 16px 36px rgba(0,23,68,.16)}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;padding:46px 14px 14px;color:#fff;background:linear-gradient(rgba(0,12,36,0),rgba(0,12,36,.85));pointer-events:none}
.reel figcaption b{font-size:15px}
.reel figcaption span{font-size:13px;opacity:.9}
.reel__btn{position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:rgba(0,12,36,.55);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.reel__btn svg{width:18px;height:18px}
.reel__btn .reel__on{display:none}
.reel.is-snd .reel__btn{background:#C1D72E;color:#001744}
.reel.is-snd .reel__btn .reel__on{display:inline}
.reel.is-snd .reel__btn .reel__off{display:none}
.reel__btn:focus-visible{outline:3px solid #C1D72E;outline-offset:2px}
@media (max-width:900px){.sec--feed .feed{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.reel{border-radius:14px}.reel figcaption{padding:36px 10px 10px}.reel figcaption b{font-size:14px}}
/* 5 oct, tarde: 3 piezas. En escritorio, tres columnas sin estirarse; en móvil, fila que se desliza (asoma la siguiente) */
.sec--feed .feed--3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1040px}
@media (max-width:900px){.sec--feed .feed--3{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(64%,300px);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:4px}
.sec--feed .feed--3::-webkit-scrollbar{display:none}.feed--3 .reel{scroll-snap-align:start}}