/* Propuesta de maquetacion para ioplat.com (sobre la propuesta de iconos Phosphor).
   Se enlaza al final del <head> (inc/header.php). Si se adopta, cada bloque se funde en su
   archivo de origen (style.css, home.css, landing-c.css y el <style> de cada modulo) y este
   archivo desaparece. Los selectores con «body» solo ganan a los <style> que las paginas de
   modulos escriben dentro del <body>. */

/* 1. Una sola familia en todo el sitio: Archivo (Google Fonts, licencia OFL), servida desde
      /fonts como hoy Inter. Es la que ya usan las paginas por pais. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-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}
:root{
  /* Verde de marca un tono mas profundo: el actual (#4a9b8e) da 3,3:1 como texto o fondo de boton. */
  --color-primary:#357f73;
  --color-primary-dark:#2b6b60;
  --color-primary-light:#4a9b8e;
  --color-gray-500:#5c6b68;
  --color-primary-on-dark:#7cc4b6;
  --ease-out:cubic-bezier(.23,1,.32,1);
}

/* 2. Texto: titulos equilibrados, parrafos sin viudas, palabras largas que parten */
h1,h2,h3,h4{text-wrap:balance;}
p,li,dd,small{text-wrap:pretty;}
h1,h2,h3,h4,p,li,dd,dt,small,b,strong,.overline{overflow-wrap:break-word;}
.grid>*,.mod-grid>*,.card,.card>*,.pricing-card{min-width:0;}

/* 3. Encabezados y portadas alineados a la izquierda, con el mismo borde que el contenido */
.section-header{text-align:left;margin-inline:0;max-width:720px;margin-bottom:var(--space-12);}
.hero{text-align:left;}
.container.hero__content{max-width:var(--container-max);}
.hero__content>*{max-width:760px;}
.hero .lead{margin-inline:0;}
.hero__actions{justify-content:flex-start;}
.cta-section{text-align:left;}
.cta-section .lead{margin-inline:0;color:#c3cdcb;}
.nav__link.active{color:var(--color-primary-dark);}
/* Bloques estrechos que hoy se centran con estilo en linea: arrancan en el mismo borde que el
   resto. Al adoptar, se quita margin-inline:auto de esos estilos en linea y estas reglas sobran.
   Las tarjetas sueltas de acceso (login, registro-exito, boletin) siguen centradas. */
body .grid[style*="margin-inline"]{margin-inline:0 !important;}
body .mp-pais :is(.mp-pais__lead,.mp-seg,.mp-card,.mp-compact){margin-left:0;margin-right:auto;}
body .mp-seg{box-shadow:none;}
.section-header .lead{margin-inline:0;}
body section>.container:is([style*="max-width:800px"],[style*="max-width:900px"],[style*="max-width:1000px"]){
  margin-left:max(0px,calc((100% - var(--container-max)) / 2));margin-right:auto;
}

/* 4. Etiquetas sobre los titulos en minuscula normal */
.overline{text-transform:none;letter-spacing:0;font-size:var(--font-size-sm);font-weight:600;}
.footer__heading{text-transform:none;letter-spacing:0;}

/* 5. Sin degradados, orbes ni texto degradado */
.hero__bg,.hero-dark__bg,.cta-section::before{background:none;animation:none;}
.hero-dark__orb,body .mod-orb{display:none;}
body .gradient-text,body .mp-pais .gradient-text,body .hero-dark__title-gradient{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:inherit;animation:none;}
.cta-section{background:var(--color-secondary);}
body .mod-hero__bg{background:none;animation:none;}

/* 6. Portada de inicio: fondo liso, texto a la izquierda, un boton principal claro */
.hero-dark__content{text-align:left;width:100%;max-width:1200px;margin:0 auto;padding:0 32px;box-sizing:border-box;}
.hero-dark__mockup-wrap{width:calc(100% - 64px);max-width:1136px;margin-left:auto;margin-right:auto;}
.hero-dark__mockup{max-width:880px;margin-left:0;}
.stats-bar__grid{max-width:1136px;}
.hero-dark__title{animation:none;}
.hero-dark__sub{margin-left:0;color:rgba(255,255,255,.72);animation:none;}
.hero-dark__actions{justify-content:flex-start;animation:none;}
.hero-dark__trust{justify-content:flex-start;align-items:flex-start;color:rgba(255,255,255,.62);animation:none;}
.hero-dark__badge{background:none;border:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;animation:none;}
.hero-dark__badge-dot,.hero__badge-dot,body .mod-hero__badge-dot{animation:none;}
.hero__badge,body .mod-hero__badge{background:none;border:0;padding:0;}
.hero-dark__btn-primary{background:var(--color-primary);box-shadow:none;animation:none;border-radius:var(--radius-lg);}
.hero-dark__btn-outline{border-radius:var(--radius-lg);backdrop-filter:none;-webkit-backdrop-filter:none;}
.hero-dark__btn-primary:hover,.hero-dark__btn-outline:hover{transform:none;box-shadow:none;}
/* Pantallas anchas: el tablero va a la derecha del texto, que si no deja vacio el lado derecho.
   Por debajo de 1100 px queda debajo del texto; por debajo de 769 px home.css lo oculta. */
@media (min-width:1100px){
  .hero-dark{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:48px;align-items:center;align-content:center;
    padding:128px max(32px,calc((100% - 1136px) / 2)) 136px;}
  .hero-dark__content{width:auto;max-width:none;margin:0;padding:0;}
  .hero-dark__title{font-size:clamp(2.5rem,3.2vw,3rem);}
  .hero-dark__actions{gap:12px;}
  .hero-dark__btn-primary,.hero-dark__btn-outline{padding-inline:24px;}
  .hero-dark__mockup-wrap{width:auto;max-width:none;margin:0;}
  .hero-dark__mockup{max-width:none;}
  .mockup__sidebar{width:140px;}
  .mockup__stats{grid-template-columns:repeat(2,1fr);}
}
/* «Iniciar sesion» sobre las portadas oscuras: hoy queda en gris sobre azul noche (1,5:1). */
body:has(.hero-dark,.mod-hero) .nav:not(.scrolled) .nav__actions .btn-outline{color:#fff;border-color:rgba(255,255,255,.45);}
body:has(.hero-dark,.mod-hero) .nav:not(.scrolled) .nav__actions .btn-outline:hover{background:rgba(255,255,255,.12);}

/* 7. Iconos de funcion sin baldosa: un color, 24 px, alineados con el titulo */
.card__icon,.stats-bar__icon,body .mod-card__icon,body .feat-row__icon-lg,body .pl-dept__ico{
  background:none;border:0;border-radius:0;width:auto;height:auto;justify-content:flex-start;
}
.card:hover .card__icon{background:none;}
.stats-bar__icon{justify-content:center;}
.benefit-card{text-align:left;background:var(--color-white);border-color:var(--color-gray-200);}
.benefit-card:hover{box-shadow:none;border-color:var(--color-gray-300);}
.benefit-card__icon{background:none;width:auto;height:auto;margin:0 0 var(--space-4);justify-content:flex-start;}
.benefit-card__icon,.benefit-card__icon svg{color:var(--color-primary);}

/* 7b. Sin barra de acento en cajas redondeadas: banda «a la medida» de los modulos y avisos */
body .mp-medida__box{max-width:none;margin:0;background:var(--color-gray-50);border-left:1px solid var(--mp-line);}
body .mp-medida__ico{background:none;border:0;width:auto;height:auto;}
body :is(.mp-aviso,.cf-aviso,.feat-nota){border-left:1px solid #fcd34d;}
body .mockup-nota{border-left:1px solid rgba(245,158,11,.25);}
body .mp-aviso--compact{max-width:none;margin-inline:0;}
.legal .legal-highlight{border-left:0;border-radius:var(--radius-md);}

/* 8. Tarjetas: borde fino, sin elevacion ni salto */
.card,.pricing-card,body .mod-card,body .step-glass{transition:border-color .15s var(--ease-out);}
.card:hover,.pricing-card:hover,body .mod-card:hover,body .step-glass:hover{transform:none;box-shadow:none;border-color:var(--color-gray-300);}
.pricing-card--featured,.pricing-card--featured:hover{box-shadow:none;}
body .step-glass{background:var(--color-white);}
body .step-num{background:var(--color-primary);}

/* 9. Botones: sin salto ni brillo al pasar, respuesta al pulsar */
.btn{transition:background-color .15s var(--ease-out),border-color .15s var(--ease-out),color .15s var(--ease-out),transform .12s var(--ease-out);}
.btn-primary:hover,.btn-secondary:hover{transform:none;box-shadow:none;}
.btn:active,.hero-dark__btn-primary:active,.hero-dark__btn-outline:active{transform:scale(.97);}

/* 10. Menu: transicion corta en todos los enlaces */
.nav a{transition:color .15s var(--ease-out),background-color .15s var(--ease-out);}

/* 11. Paginas por pais: los rotulos dejan la letra monoespaciada y las mayusculas; los numeros
       de seccion se quedan (ordenan la lectura) pero en la misma letra que el resto.
       Codigos y cifras de tablas siguen en monoespaciada: ahi alinean digitos. */
body:has(.c-page) :is(.c-mono,.nav__link,.nav__dropdown-trigger,.nav .btn,.nav__mobile-link,.nav__mobile-actions .btn,.c-btn,
  .c-spec dt,.c-stat span,table.c-rates caption,.c-mod__d em,.c-geo .st,.footer__heading,.footer__newsletter .btn,
  .c-toc a .n,.c-secn,.c-plan__price small,.c-blkh .k,.c-mod__n,.c-faq summary .n,.c-geo .iso){
  font-family:var(--c-sans);text-transform:none;letter-spacing:0;
}
.c-h1 .mark{color:inherit;white-space:normal;}
.c-h1 .mark::after{display:none;}
.c-lead{padding-left:0;border-left:0;}