/* ============================================================
   SIMVIOTIK — Estilos de páginas interiores
   ============================================================ */

/* ── Page Hero (encabezado de páginas interiores) ── */

.page-hero {
  padding-top: var(--navbar-height);
  padding-bottom: 16px;
  background: var(--cream);
}

.page-hero h1 {
  font-size: clamp(40px, 6vw, 96px);
  margin-bottom: 12px;
}
@media(max-width:768px){.page-hero--nosotros h1{display:none;}}

.page-hero__subtitle {
  font-size: clamp(17px, 1.5vw, 21px);
  color: color-mix(in oklab, var(--forest) 65%, transparent);
  max-width: 60ch;
  line-height: 1.55;
  margin-top: 48px;
}

/* ── Contacto ── */

.contact-section {
  background: color-mix(in oklab, var(--sage) 10%, var(--cream));
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.contact-form-wrap h2 {
  font-size: clamp(28px, 3vw, 44px);
  margin-bottom: 12px;
}

.contact-form-wrap > p {
  font-size: 16px;
  color: color-mix(in oklab, var(--forest) 65%, transparent);
  margin-bottom: 32px;
  max-width: none;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-form__legal {
  font-size: 11px;
  color: color-mix(in oklab, var(--forest) 45%, transparent);
  text-align: center;
  max-width: none;
}

.contact-form__legal a {
  color: var(--moss);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 0;
}

.contact-info__block h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 500;
  color: var(--forest);
  margin-bottom: 10px;
}

.contact-info__link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--forest);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: var(--border-subtle);
  transition: color var(--transition-fast);
}

.contact-info__link:hover {
  color: var(--moss);
}

.contact-info__link .icon {
  color: var(--lime);
  flex-shrink: 0;
}

.contact-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.contact-steps__num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--lime) 20%, var(--cream));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--forest);
}

.contact-steps strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--forest);
  margin-bottom: 4px;
}

.contact-steps p {
  font-size: 14px;
  color: color-mix(in oklab, var(--forest) 60%, transparent);
  max-width: none;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ── Servicios page ── */

.services-page-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 80px);
}

.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: var(--border-subtle);
}

.service-detail:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.service-detail:nth-child(even) .service-detail__visual {
  order: -1;
}

.service-detail__num {
  margin-bottom: 8px;
  display: block;
}

.service-detail h2 {
  font-size: clamp(28px, 3.5vw, 52px);
  margin-bottom: 12px;
}

.service-detail__tagline {
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 700;
  color: var(--moss);
  margin-bottom: 16px;
  display: block;
}

.service-detail > div > p {
  font-size: 16px;
  color: color-mix(in oklab, var(--forest) 70%, transparent);
  margin-bottom: 24px;
  max-width: none;
}

.service-detail__features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.service-detail__features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--forest);
}

.service-detail__features .icon {
  width: 18px;
  height: 18px;
  color: var(--lime);
  flex-shrink: 0;
}

.service-detail__visual {
  background: color-mix(in oklab, var(--sage) 20%, var(--cream));
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  align-self: start;
}

.service-detail__visual img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 900px) {
  .service-detail {
    grid-template-columns: 1fr;
  }
  .service-detail:nth-child(even) .service-detail__visual {
    order: initial;
  }
}

/* ── Casos de éxito page ── */

.cases-page-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 56px);
}

.case-detail {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  padding: clamp(24px, 3vw, 48px);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--cream);
  transition: box-shadow var(--transition-base);
}

.case-detail:hover {
  box-shadow: var(--shadow-md);
}

.case-detail__metrics {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.case-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.case-metric__value {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 600;
  color: var(--forest);
  line-height: 1;
}

.case-metric__label {
  font-size: 13px;
  color: color-mix(in oklab, var(--forest) 55%, transparent);
  font-weight: 500;
}

.case-detail__content h2 {
  font-size: clamp(22px, 2.5vw, 36px);
  margin-bottom: 12px;
}

.case-detail__content > p {
  font-size: 16px;
  color: color-mix(in oklab, var(--forest) 70%, transparent);
  margin-bottom: 20px;
  max-width: none;
}

.case-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .case-detail {
    grid-template-columns: 1fr;
  }
}

.case-detail--coming-soon {
  grid-template-columns: 1fr;
}

.case-detail__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 6vw, 80px);
}

.case-detail__placeholder-icon {
  width: 48px;
  height: 48px;
  color: var(--lime);
  flex-shrink: 0;
}

.case-detail__placeholder-text h2 {
  font-size: clamp(22px, 2.5vw, 36px);
  margin-bottom: 12px;
}

.case-detail__placeholder-text p {
  font-size: 16px;
  color: color-mix(in oklab, var(--forest) 70%, transparent);
  max-width: 48ch;
  margin: 0 auto;
}

/* ── Blog page ── */

.blog-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(16px, 2.5vw, 32px);
}

.blog-page-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 3vw, 36px);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--cream);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.blog-page-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.blog-page-card__image {
  aspect-ratio: 16/9;
  background: color-mix(in oklab, var(--sage) 30%, var(--cream));
  border-radius: var(--radius-sm);
  margin: calc(-1 * clamp(24px, 3vw, 36px)) calc(-1 * clamp(24px, 3vw, 36px)) 0;
  border-bottom: var(--border-subtle);
}

.blog-page-card h2 {
  font-size: clamp(18px, 1.8vw, 26px);
}

.blog-page-card p {
  font-size: 15px;
  color: color-mix(in oklab, var(--forest) 65%, transparent);
  flex: 1;
  max-width: none;
}

/* ── Sobre nosotros page ── */

.about__grid--founder{grid-template-columns:1fr minmax(0,420px);grid-template-areas:none;gap:clamp(40px,6vw,80px);align-items:start;margin-top:clamp(24px,3vw,40px);}
.about-founder{display:flex;flex-direction:column;align-items:center;gap:24px;}
.about-founder__photo{width:100%;max-width:420px;height:auto;border-radius:var(--radius-sm);object-fit:cover;border:3px solid var(--lime);box-shadow:0 8px 32px color-mix(in oklab,var(--forest) 15%,transparent);}
.about-founder__info{display:flex;flex-direction:column;gap:4px;text-align:center;}
.about-founder__name{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--forest);}
.about-founder__role{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:color-mix(in oklab,var(--forest) 55%,transparent);}
@media(max-width:768px){
  .about__grid--founder{grid-template-columns:1fr;}
  .about-founder{order:-1;}
  .about-founder__photo{width:290px;height:290px;max-width:290px;border-radius:var(--radius-sm);object-fit:cover;object-position:center;border:3px solid var(--lime);}
  .calajan-section-grid .calajan-frame{width:290px;height:290px;border-radius:var(--radius-sm);box-shadow:none;border:3px solid var(--lime);padding:0;background:none;overflow:hidden;}
  .calajan-section-grid .calajan-frame>picture{border-radius:0;overflow:hidden;}
  .calajan-section-grid .calajan-img{width:290px;height:290px;object-fit:cover;object-position:center;border-radius:0;}
}

.about-page-story {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 28px);
  max-width: 760px;
}

.about-page-story p {
  font-size: clamp(17px, 1.4vw, 20px);
  color: color-mix(in oklab, var(--forest) 75%, transparent);
  max-width: none;
}

.about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  margin-top: clamp(48px, 6vw, 80px);
}

@media (max-width: 768px) {
  .about-values {
    grid-template-columns: 1fr;
  }
}

.about-value {
  padding: clamp(24px, 3vw, 36px);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--cream);
}

.about-value h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 500;
  color: var(--forest);
  margin-top: 16px;
  margin-bottom: 8px;
}

.about-value p {
  font-size: 15px;
  color: color-mix(in oklab, var(--forest) 65%, transparent);
  max-width: none;
}

.about-value .icon {
  color: var(--lime);
  width: 28px;
  height: 28px;
}

/* ── Section background utilities ── */
.section--cream{background:var(--cream);padding-block:var(--pad-y);}.section--page-top{padding-top:calc(var(--navbar-height) + var(--pad-y));}
.section--cream-flush-top{background:var(--cream);padding-top:0;padding-bottom:var(--pad-y);}
.section--cream-tight-top{background:var(--cream);padding-top:clamp(12px,1.5vw,24px);padding-bottom:var(--pad-y);}
.section--forest{background:var(--forest);padding-block:var(--pad-y);color:var(--cream);}
.section--sage-light{background:color-mix(in oklab,var(--sage) 12%,var(--cream));padding-block:var(--pad-y);}

/* ── CTA final cream override (sobre-nosotros) ── */
.cta-final--cream{background:var(--cream);}
.cta-final--cream>.container{text-align:center;}
.cta-final--cream h2{color:var(--forest);margin-bottom:20px;}
.cta-final--cream p{color:color-mix(in oklab,var(--forest) 65%,transparent);font-size:clamp(17px,1.4vw,20px);max-width:52ch;margin:0 auto 40px;display:block;}

/* ── CTA final centered (index, servicios, resultados) ── */
.cta-final--centered .cta-final__inner{grid-template-columns:1fr;text-align:center;}
.cta-final--centered .cta-final__actions{justify-content:center;}
.cta-final--centered .cta-final__mascot{display:none;}
.cta-final--centered .cta-final__content p{margin-inline:auto;}

/* ── Calajan section (sobre-nosotros) ── */
.calajan-section-grid{display:grid;grid-template-columns:1fr minmax(0,420px);gap:clamp(40px,6vw,80px);align-items:start;margin-top:clamp(24px,3vw,40px);}
@media(max-width:768px){.calajan-section-grid{grid-template-columns:1fr;gap:32px;}.calajan-section-grid .about-founder{order:-1;gap:12px;}.calajan-section-grid .fade-left{order:1;text-align:center;}.calajan-section-grid .calajan-blockquote--desktop{display:none;}}
.section-label--lime{color:color-mix(in oklab,var(--lime) 60%,transparent);}
.calajan-section-role{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:color-mix(in oklab,var(--lime) 55%,transparent);margin-top:-20px;margin-bottom:24px;}
.calajan-founder-info{display:flex;}
.calajan-founder-info .about-founder__name{color:var(--cream);}
.calajan-founder-info .about-founder__role{color:color-mix(in oklab,var(--lime) 55%,transparent);}
.calajan-section-h2{color:var(--cream);margin-bottom:24px;}
@media(max-width:768px){.calajan-section-h2{display:none;}}
@media(max-width:768px){.about-values__h2{font-size:clamp(28px,7vw,36px);white-space:nowrap;}}
.calajan-section-lead{color:color-mix(in oklab,var(--cream) 75%,transparent);font-size:clamp(17px,1.4vw,20px);margin-bottom:32px;max-width:none;}
.calajan-lead-line2{display:block;margin-top:16px;}
.calajan-values{list-style:none;padding:0;margin:32px 0 0;display:flex;flex-direction:column;gap:12px;}
@media(max-width:768px){.calajan-values--desktop{display:none;}}
.calajan-values li{font-size:clamp(15px,1.2vw,17px);color:color-mix(in oklab,var(--cream) 80%,transparent);padding-left:20px;position:relative;line-height:1.5;}
.calajan-values li::before{content:"";position:absolute;left:0;top:0.55em;width:8px;height:8px;border-radius:50%;background:var(--lime);}
.calajan-blockquote{font-family:var(--font-display);font-style:italic;font-size:clamp(16px,1.5vw,22px);color:var(--lime);border-left:3px solid var(--lime);padding-left:20px;line-height:1.3;margin-top:80px;white-space:nowrap;}
.calajan-blockquote--mobile{display:none;}
@media(max-width:768px){.calajan-blockquote--desktop{display:none;}.calajan-blockquote--mobile{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:2px solid var(--lime);padding-left:12px;margin-top:8px;}}
.flex-center{display:flex;justify-content:center;}
.calajan-frame{
  width:100%;
  max-width:420px;
  border-radius:var(--radius-sm);
  padding:0;
  background:none;
  border:3px solid var(--lime);
  box-shadow:0 8px 32px color-mix(in oklab,var(--forest) 15%,transparent);
  overflow:hidden;
}
.calajan-frame>picture{display:block;border-radius:0;overflow:hidden;}
.calajan-img{width:100%;height:auto;display:block;}

/* ── Page hero modifier ── */
.page-hero__subtitle--sm{margin-top:32px;}

/* ── Footer spacing override ── */
.footer--spaced{margin-top:clamp(40px,6vw,80px);}

/* ── FAQ ── */
.faq-items{margin-top:32px;}

/* ── Blog page ── */
.blog-filter-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px);}
.blog-card__meta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.blog-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--moss);background:color-mix(in oklab,var(--lime) 20%,var(--cream));padding:4px 10px;border-radius:99px;}
.blog-date{font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;color:color-mix(in oklab,var(--forest) 50%,transparent);}
.blog-page-card{text-decoration:none;}
.blog-page-card h2{line-height:1.2;font-size:clamp(18px,1.8vw,24px);}
.blog-page-card h2 a{color:inherit;text-decoration:none;}
.blog-page-card .btn{margin-top:auto;width:fit-content;}

/* ── Contacto ── */
.cal-embed-desc{font-size:clamp(14px,1.1vw,18px);color:color-mix(in oklab,var(--forest) 60%,transparent);margin-top:6px;}
.cal-embed-highlight{color:var(--forest);font-weight:700;font-family:var(--font-display);}
.label-stack{display:flex;flex-direction:column;gap:16px;}
.label-stack__main{margin-top:-8px;}
.label-stack__sub{white-space:nowrap;font-size:13px;}
.contact-footer-note{margin-top:12px;font-size:13px;color:inherit;opacity:0.75;line-height:1.5;}

/* ── Blog article ── */
.blog-article-wrap{max-width:880px;margin:0 auto;padding:0 clamp(24px,6vw,120px);}
.blog-article-img{width:100%;height:auto;display:block;border-radius:8px;}

/* ── Utilities ── */
.btn--sm{padding:8px 18px;font-size:14px;}
.link-contents{display:contents;text-decoration:none;color:inherit;}
.icon--sm{width:16px;height:16px;}
.honeypot-field{position:absolute;left:-9999px;opacity:0;height:0;width:0;}

/* ── Legal pages ── */
.legal-content{max-width:760px;}
.legal-content h2{font-family:var(--font-display);font-size:clamp(20px,2vw,28px);color:var(--forest);margin-top:40px;margin-bottom:12px;}
.legal-content p{font-size:16px;color:color-mix(in oklab,var(--forest) 70%,transparent);line-height:1.65;margin-bottom:16px;max-width:none;}
.legal-content ul{padding-left:24px;margin-bottom:16px;}
.legal-content li{font-size:16px;color:color-mix(in oklab,var(--forest) 70%,transparent);line-height:1.65;margin-bottom:8px;}
.legal-content a{color:var(--moss);text-decoration:underline;text-underline-offset:2px;}
.legal-updated{font-size:13px;color:color-mix(in oklab,var(--forest) 45%,transparent);margin-bottom:32px;font-family:var(--font-mono);}