/* ==========================================================================
   TOPSA · Páginas interiores hechas con bloques (Nosotros y las que vengan).
   Se aplican con la "Clase CSS adicional" de cada bloque en el editor:
   tpg-hero, tpg-sec, tpg-sec--gris, tpg-cols, tpg-pasos, tpg-no, tpg-cta, tpg-marcas.
   El plugin añade body.tpg-on cuando la página usa estas clases.
   ========================================================================== */
body.tpg-on .page-header{display:none}
/* El contenido ocupa todo el ancho y cada banda centra lo suyo a 1200 px (sin 100vw: desbordaba 8 px por la barra de scroll). */
body.tpg-on main.site-main,body.tsh-on.tpg-on main.site-main{padding:0;margin:0;max-width:none;width:auto}
body.tpg-on .site-main>.page-content>:not(.tpg){max-width:1200px;margin-left:auto;margin-right:auto;padding-left:40px;padding-right:40px;box-sizing:border-box}
body.tpg-on .site-main>.page-content>:last-child{margin-bottom:0}
.tpg{font-family:Inter,"Helvetica Neue",Arial,sans-serif}

/* Bandas a todo el ancho con el contenido centrado a 1200 px */
.wp-block-group.tpg-hero,.wp-block-group.tpg-sec,.wp-block-group.tpg-cta,.wp-block-group.tpg-marcas{
  width:auto;max-width:none;box-sizing:border-box;margin-left:0;margin-right:0;
  padding-left:max(40px,calc(50% - 600px));padding-right:max(40px,calc(50% - 600px));
}
@media (max-width:640px){
  .wp-block-group.tpg-hero,.wp-block-group.tpg-sec,.wp-block-group.tpg-cta,.wp-block-group.tpg-marcas{padding-left:20px;padding-right:20px}
}
.tpg-hero>*,.tpg-sec>*,.tpg-cta>*,.tpg-marcas>*{margin-left:0;margin-right:0;max-width:none}

/* ---- hero oscuro ---- */
.wp-block-group.tpg-hero{background:#0A0A0A;color:#fff;padding-top:72px;padding-bottom:64px}
.tpg-hero .tpg-eyebrow{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#FF6A00}
.tpg-hero h1{margin:0 0 18px;font:700 clamp(36px,4.6vw,60px)/1.05 Inter,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.025em;color:#fff;max-width:14em}
.tpg-hero h1 em{font-style:normal;color:#FF6A00}
.tpg-hero p{font-size:18px;line-height:1.55;color:#CFCAC3;max-width:40em;margin:0 0 12px}
.tpg-hero .tpg-hero-nota{font-size:14px;color:#8A857E;margin-bottom:0}

/* ---- secciones ---- */
.wp-block-group.tpg-sec{padding-top:56px;padding-bottom:52px;border-top:1px solid #DDD9D2;color:#111}
.wp-block-group.tpg-sec.tpg-sec--gris{background:#F7F5F1}
.tpg-sec .tpg-eyebrow{margin:0 0 10px;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#5D5954}
.tpg-sec h2{margin:0 0 16px;font:700 clamp(26px,3vw,36px)/1.15 Inter,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.02em;color:#111;max-width:22em}
.tpg-sec h3{margin:0 0 12px;font:600 20px/1.25 Inter,"Helvetica Neue",Arial,sans-serif;color:#111}
.tpg-sec p,.tpg-sec li{font-size:16.5px;line-height:1.6;color:#2A2723}
.tpg-sec p{margin:0 0 14px;max-width:44em}
.tpg-sec .tpg-intro{font-size:18px;color:#5D5954;margin-bottom:28px}
.tpg-sec>:last-child{margin-bottom:0}

/* dos columnas Digital / Físico */
.wp-block-columns.tpg-cols{gap:28px;margin:0}
.tpg-cols .wp-block-column{padding:26px 26px 22px;border:1px solid #DDD9D2;border-top:3px solid #FF6A00;background:#fff;box-sizing:border-box}
.tpg-cols ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.tpg-cols li{position:relative;padding-left:16px;font-size:15.5px;margin:0}
.tpg-cols li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:#FF6A00;border-radius:1px}
@media (max-width:640px){.tpg-cols ul{grid-template-columns:1fr}}

/* pasos numerados */
ul.tpg-pasos,ol.tpg-pasos{list-style:none;margin:0;padding:0;counter-reset:paso;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.tpg-pasos li{counter-increment:paso;margin:0;padding:18px 18px 16px;border:1px solid #DDD9D2;background:#fff;font-size:15.5px;line-height:1.5}
.tpg-pasos li::before{content:counter(paso,decimal-leading-zero);display:block;font:700 13px/1 Inter,"Helvetica Neue",Arial,sans-serif;letter-spacing:.12em;color:#BF4700;margin-bottom:10px}
.tpg-pasos li strong{display:block;font-size:16.5px;margin-bottom:4px;color:#111}

/* lo que no somos */
ul.tpg-no{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.tpg-no li{margin:0;padding:18px 20px;background:#111;color:#fff;font-size:16px;line-height:1.5}
.tpg-no li strong{color:#FF6A00;display:block;margin-bottom:4px}

/* marcas y proyectos (texto) */
.wp-block-group.tpg-marcas{background:#0A0A0A;color:#fff;padding-top:44px;padding-bottom:44px}
.tpg-marcas .tpg-eyebrow{margin:0 0 10px;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#FF6A00}
.tpg-marcas p{margin:0;font-size:22px;line-height:1.5;color:#E6E1DA;max-width:40em}
.tpg-marcas p strong{color:#fff}
.tpg-marcas a,.tpg-marcas a:visited{color:#FF6A00;text-decoration:none;border-bottom:1px solid #FF6A00}

/* cta */
.wp-block-group.tpg-cta{background:#F7F5F1;padding-top:48px;padding-bottom:48px;border-top:1px solid #DDD9D2}
.tpg-cta h2{margin:0 0 6px;font:700 28px/1.15 Inter,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.02em;color:#111}
.tpg-cta p{margin:0 0 18px;color:#5D5954;font-size:16px;max-width:44em}
.tpg-cta .wp-block-buttons{gap:12px;margin:0}
.tpg-cta .wp-block-button__link,.tpg-cta .wp-block-button__link:visited{border-radius:8px;padding:13px 22px;font:600 14.5px/1.2 Inter,"Helvetica Neue",Arial,sans-serif;background:#FF6A00;color:#fff;border:1px solid #FF6A00;text-decoration:none}
.tpg-cta .wp-block-button__link:hover{background:#E65F00;border-color:#E65F00;color:#fff}
.tpg-cta .is-style-outline .wp-block-button__link,.tpg-cta .is-style-outline .wp-block-button__link:visited{background:transparent;color:#111;border-color:#111}
.tpg-cta .is-style-outline .wp-block-button__link:hover{background:#111;color:#fff}