/*-- diseñado por: Jorge Nahuel Mendez, codigo por: Julian Federico Viel --*/
/* --- tiny baseline --- */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
#container{
  display: flex;
  flex-direction: row;
  margin: auto;
  padding: 8px 16px;
}
.container{
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* ---- Header -------*/
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
}
/*------------ Logo ----------------*/
/* brand (left) */
.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left:10%;
  text-decoration: none;
  color: #0f172a;     /* near-black */
}

.brand-logo{
  height: 28px;       /* adjust to match your image */
  width: auto;
  display: block;
}

.brand-text{ display: inline-flex; align-items: baseline; gap: 6px; }
.brand-title{ font-weight: 800; letter-spacing: .3px; color: #0b3aa6; } /* blue like screenshot */
.brand-sub{ font-size: .85rem; color: #4c6faf; }

/* WhatsApp (right) */
.cta-wa { display: inline-flex; align-items: center; margin-right:10%;}
.wa-icon{
  position: relative;
  height: 60px;       /* size of the green circle */
  width: auto;
  display: block;
}
/* optional: sticky header */
@supports(position: sticky){
  .site-header{ position: sticky; top: 0; z-index: 10; }
}

/*------------------Header End---------------------------*/
:root{
  --blue: #062C64;
  --blue-2: #264777;
  --red:  #e22b2b;
  --text: #0f172a;
  --muted:#4b5563;
  --card: #ffffff;
  --radius: 14px;
  --navy: #0f2f5e;
  --navy-2: #0b264d;
  --light-border: #e6ecf7;
}

/* ========== SECTION 1: HERO ============================================ */
.hero-grid{
  position: relative;
  min-height: unset;
  border-radius: 0px;
  overflow: hidden;
}
.hero-img{
  position: static;
  margin-top: 10px;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center-right;
  display: block;
}
.hero-copy{
  position: relative;        /* sits above the image */
  z-index: 1;
  margin-left: auto;         /* push to right */
  max-width: min(560px, 55%);
  padding: 0;
  color: #0f172a;
  display: none;
}
.hero > .container{
  max-width: none;   /* quitar límite de 1100px */
  width: 100%;
  height: 100%;
  padding:0;
  display: block;    /* neutraliza el display:flex global del .container */
}

/* ========== SECTION 2: PLANTILLAS ====================================== */
.plantillas-card{
  background: none;
  border: none;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  min-height: clamp(260px, 40vw, 420px);
  width: 100%;
}
.plantillas-grid{
  position: relative;
  width: 100%;
  min-height: clamp(300px, 46vw, 520px);
  border-radius: 0px;
  overflow: hidden; 
  object-fit: cover;
  object-position: center right;
  padding-top: 20px;
}
.plantillas-img{
  position: absolute;
  z-index: 0;
  inset: 0;                    /* top:0 right:0 bottom:0 left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;           /* cover the area without distortion */
  object-position: center right;
  display: block;
}
.plantillas-copy{
  position: relative;
  left: 0px;
  z-index: 1;
  margin-left: clamp(12px, 4vw, 48px);           /* push to the right */
  max-width: min(560px, 60%);
  padding: clamp(12px, 3vw, 24px);
  text-align: left;
  color: #0f172a;
}
.plantillas > .container{
  max-width: none;   /* quitar límite de 1100px */
  width: 100%;
  padding:0;
  display: block;    /* neutraliza el display:flex global del .container */
}
.plantillas-title{ margin:0 0 .25em; line-height:1; }
.plantillas-title .t1{ font-weight:900; font-size: clamp(32px, 7vw, 72px); letter-spacing:.5px;color: var(--blue); }
.plantillas-title .t2{ font-weight:700; font-size: clamp(20px, 4vw, 36px); color: var(--blue); }
.plantillas-sub{ color: var(--blue); text-transform: uppercase; letter-spacing:.4px; }
.btn{ display:inline-block; margin-top:.6rem; padding:.6rem .9rem; background: var(--blue); color:#fff; text-decoration:none; font-weight:600; border-radius:12px; }
.btn:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

.plantillas-grid::after{ display: none; }
.plantillas-copy{ position: static;  max-width: unset; padding: 0;}

/* ========== SECTION 3: MISI N ========================================== */
.mision{ 
  background:#fff; 
  padding-bottom: 40px;
}
.mision-inner{ max-width: 820px; }
.mision-title{
  text-align:center;
  color: var(--red);
  font-weight:800;
  font-size: clamp(22px, 4.5vw, 34px);
  margin: 0 0 1rem;
}
.eslogan-img{
  position: relative;
  z-index: 0;
  margin: auto;
  inset: 0;                    /* top:0 right:0 bottom:0 left:0 */
  width: 75%;
  object-fit: cover;           /* cover the area without distortion */
  object-position: center right;
  display: block;
}
.mision > .container{
  max-width: none;   /* quitar límite de 1100px */
  width: 100%;
  padding-left: 0;   /* sin padding lateral */
  display: block;    /* neutraliza el display:flex global del .container */
}
.mision-text{
  text-align:center;
  color: var(--blue-2);
  margin: 0 auto 1rem;
}
.mision-marks{
  display:block; margin: 10px auto 0; height: 18px; width:auto;
  opacity:.9;
}
/* ================ Footer layout =============== */
.site-footer { margin-top: 24px; }

/* Top dark band */
.footer-top{
  background: var(--navy);
  color: #fff;
  padding: 0px 0;
}
.footer-grid{
  display: grid;
  padding-top: 5px;
  padding-bottom: 5px;
  grid-template-columns: auto 1fr 1fr; /* brand | col | col */
  gap: 24px;
  align-items: start;
}
.footer-logo{ height: 150px; width: auto; display:block; }

.footer-col h3{
  margin: 0 0 3px;
  font-size: 1.05rem;
  letter-spacing: .2px;
}

/* Contact list */
.contact-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; margin-bottom; }
.contact-list a{ color: #fff; text-decoration: none;}
.contact-list a:hover{ text-decoration: underline; }
.contact-list a { line-height: 1.2; }
/* Address block */
.address{ font-style: normal; line-height: 1.4; display: grid; grid-template-columns: 1.25em 1fr; column-gap: 8px; }
.address{
  display: grid;
  grid-template-columns: 1.25em 1fr;
  column-gap: 8px;
  align-items: center;       /* <— centers here too */
}
/* Inline icons (SVG inherit text color) */
.i{ display:inline-grid; place-items:center; width:1.15em; height:1.15em; margin-right: 6px; }
.i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 2em;
  margin-right: 6px;
  vertical-align: middle;
}
.i img {
  width: 180%;
  height: auto;
  object-fit: contain;
}
/* Bottom partner strip */
.footer-bottom{
  background: #fff;
  border-top: 1px solid var(--light-border);
  padding: 14px 0;
}
.partners{
  display:flex; align-items:center; gap: 28px; flex-wrap: wrap;
}
.partner{ height: 100px; width:auto; display:block; }

.hero, .plantillas, .hero-grid, .plantillas-card, .plantillas-grid { margin-top: 0; margin-bottom: 0;}
.plantillas .container { display: block; }
.plantillas-img{
  position: relative;   /* was absolute */
  z-index: 0;
  width: 100%;
  height: auto;         /* was 100% */
  object-fit: contain;  /* was cover */
  display: block;
}
.plantillas-grid{
  position: absolute;   /* was relative */
  inset: 0;             /* overlay the image area */
  padding: 0;
}

/* responsive tweaks */
@media (min-width: 320px) and (max-width: 450px) {
  #container {
    flex-direction: column;
    max-width: 100%;
    margin: auto;
    padding: 16px;
    text-align: center;
    vertical-align: middle; /* corregido */
  }

  .plantillas-copy {
	font-size: 10px;
	padding-left: 150px;
    text-align: left;
  }

  .plantillas-title h2 {
    display: inline-block; /* corregido */
    position: relative;
    margin-top: 20px;
  }

  .plantillas-grid {
    position: relative;
    padding-top: 0;
    gap: none;
  }



  .eslogan-img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .footer-logo {
    height: 50px;
  }

  .footer-col {
    font-size: 10px;
  }
}
@media (min-width: 451px) and (max-width: 768px) {
  body {
    font-size: 15px; /* ligeramente más grande que en móviles */
  }

  #container {
    flex-direction: column;
    max-width: 100%;
    margin: auto;
    padding: 24px;
    text-align: center;
    vertical-align: middle;
  }

  .plantillas-copy {
	font-size: 11px;
    text-align: left;
    margin: 0 auto;
    padding-left: 300px;
  }

  .plantillas-title .t1 {
    font-size: clamp(28px, 6vw, 60px);
  }

  .plantillas-title .t2 {
    font-size: clamp(18px, 4vw, 32px);
  }

  .plantillas-title h2 {
    display: inline-block;
    margin-top: 20px;
  }

  .plantillas-grid {
    position: relative;
    padding-top: 0;
  }

  .eslogan-img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .footer-logo {
    height: 80px;
  }

  .footer-col {
    font-size: 0.85rem;
  }
}
@media (min-width: 769px) {
  body {
    font-size: 16px; /* tamaño base cómodo para lectura en desktop */
  }

  #container {
    flex-direction: column;
    max-width: 1100px;
    margin: auto;
    padding: 32px;
    text-align: left;
  }

  .plantillas-copy {
    text-align: left;
    margin-left: 50%;
    padding: 24px;
  }

  .plantillas-title .t1 {
    font-size: clamp(36px, 6vw, 72px);
  }

  .plantillas-title .t2 {
    font-size: clamp(24px, 4vw, 40px);
  }

  .plantillas-title h2 {
    display: inline-block;
    margin-top: 24px;
  }

  .plantillas-grid {
    position: relative;
    padding-top: 0;
  }

  .eslogan-img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .footer-logo {
    height: 120px;
  }

  .footer-col {
    font-size: 1rem;
  }
  .footer-col h3{
	  font-size: 40px;
  }
  .address{
	  font-size:30px;
  }
  .contact-list{
	  font-size:30px;
  }
}
.plantillas-grid{
  position: absolute;  /* overlay the image area */
  inset: 0;
  z-index: 1;          /* sit above the image */
  padding: 0;
}