/* Componentes — un bloque por componente */
@layer components {

/* Destino de anclas: la cabecera sticky no debe tapar el h2/h3 de llegada (RC1) */
section[id], main[id], [id] {
  scroll-margin-top: 8rem;
}

@media (min-width: 1024px) {
  section[id], main[id], [id] {
    scroll-margin-top: 6rem;
  }
}

/* Enlace saltar al contenido */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s-2);
  z-index: 100;
  background: var(--c-tinta);
  color: var(--c-crema);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-ui);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--s-2);
}

/* ===== .site-header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 246, 239, .96);
  border-bottom: 1px solid var(--c-arena);
}

.site-header__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  padding-block: var(--s-2);
}

@media (max-width: 639.98px) {
  .site-header__bar {
    gap: .375rem;
    padding-block: .625rem;
  }
}

/* Una sola fila a partir de 360 px; a 320 px se permite envolver (O1). Solo con JS: sin JS la lista de enlaces vive en la barra y debe poder envolver. */
@media (min-width: 360px) and (max-width: 639.98px) {
  html.js .site-header__bar {
    flex-wrap: nowrap;
  }
}

@media (min-width: 1024px) {
  .site-header__bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo nav cta";
    align-items: center;
    gap: var(--s-3);
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  margin-right: auto;
}

@media (max-width: 639.98px) {
  .logo {
    gap: .5rem;
  }
}

@media (min-width: 1024px) {
  .logo {
    grid-area: logo;
    margin-right: 0;
  }
}

.logo__mark {
  flex-shrink: 0;
}

.logo__text {
  font: 500 1.25rem/1 var(--f-serif);
  letter-spacing: .16em;
  color: var(--c-tinta);
  white-space: nowrap;
}

@media (max-width: 639.98px) {
  .logo__text {
    font-size: 1.125rem;
    letter-spacing: .12em;
  }
}

.site-header__cta {
  flex-shrink: 0;
  padding-inline: var(--s-2);
}

@media (max-width: 639.98px) {
  .site-header__cta {
    padding: .625rem .625rem;
  }
  .site-header__cta.btn {
    font-size: .875rem;
  }
}

/* Entre 360 y 374 px la barra roza el margen: botón un punto más pequeño */
@media (max-width: 374.98px) {
  .site-header__cta.btn,
  .nav__toggle {
    font-size: .8125rem;
  }
}

@media (min-width: 1024px) {
  .site-header__cta {
    grid-area: cta;
  }
}

.nav__toggle {
  flex-shrink: 0;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--s-1);
  border: 1px solid var(--c-piedra);
  border-radius: var(--radius-ui);
  font: 600 var(--fs-btn)/1 var(--f-sans);
}

@media (max-width: 639.98px) {
  .nav__toggle {
    padding: .625rem .5rem;
    font-size: .875rem;
  }
}

html:not(.js) .nav__toggle {
  display: none;
}

@media (min-width: 1024px) {
  .nav__toggle {
    display: none;
  }
}

/* ===== .nav ===== */
.nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font: 600 var(--fs-btn)/1 var(--f-sans);
}

.nav__list li a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
}

@media (max-width: 1023.98px) {
  html.js .nav__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--c-crema);
    border-top: 1px solid var(--c-arena);
    padding: var(--s-3);
    z-index: 30;
  }
  html.js .nav.is-open .nav__list {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .nav {
    grid-area: nav;
    min-width: 0;
  }
  .nav__list {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 1.75rem;
  }
  .nav__list li a {
    min-height: auto;
  }
}

/* ===== .hero ===== */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--c-durazno) 0%, var(--c-durazno-claro) 60%, var(--c-arena) 100%);
}

.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--c-gris);
}

.hero__mancha {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 35%;
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}

@media (min-width: 1024px) {
  .hero__mancha {
    top: 0;
    left: 58%;
    right: 0;
    width: 42%;
    height: 100%;
  }
}

.hero__sol {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: var(--c-rojo);
  box-shadow: 0 0 120px 60px rgba(178, 74, 62, .16);
  width: 72px;
  height: 72px;
  top: 1.5rem;
  right: 1rem;
}

/* RC3: en escritorio el sol se posiciona respecto a la columna derecha del hero (hero__visual), no a la sección completa */
@media (min-width: 1024px) {
  .hero__visual {
    position: relative;
  }
  .hero__sol {
    width: 220px;
    height: 220px;
    top: 30%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

.hero__grid {
  position: relative;
  z-index: 1;
  padding-block: 6rem 4rem;
}

@media (min-width: 1024px) {
  .hero__grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--s-6);
    padding-block: 7.5rem 6rem;
  }
}

.hero__content {
  display: grid;
}

.hero__lead {
  font-size: var(--fs-hero-lead);
  line-height: 1.6;
  color: var(--c-gris);
  max-width: 34rem;
  margin-block: var(--s-3) var(--s-4);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.hero__actions .btn--primary {
  width: 100%;
}

.hero__actions .btn--ghost {
  align-self: flex-start;
}

@media (min-width: 640px) {
  .hero__actions {
    flex-direction: row;
    gap: var(--s-3);
  }
  .hero__actions .btn--primary {
    width: auto;
  }
}

.hero__trust {
  font-size: var(--fs-meta);
  color: var(--c-gris);
  margin-top: var(--s-4);
}

.hero__contacto {
  font-size: var(--fs-btn);
  color: var(--c-gris);
  margin-top: var(--s-3);
}

.hero__contacto a {
  text-decoration-thickness: 1px;
}

/* ===== .btn ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-ui);
  font: 600 var(--fs-btn)/1 var(--f-sans);
  text-decoration: none;
  border: 1px solid transparent;
}

.btn--primary {
  background: var(--c-rojo);
  color: var(--c-crema);
}

.btn--primary:hover {
  background: #9E4237;
}

.btn--dark {
  background: var(--c-gris);
  color: var(--c-crema);
}

.btn--dark:hover {
  background: var(--c-tinta);
}

.btn--ghost {
  border-color: var(--c-gris);
  color: var(--c-gris);
}

.btn--ghost:hover {
  background: var(--c-papel);
}

.btn--ghost-dark {
  border: 1px solid var(--c-durazno);
  color: var(--c-durazno);
  background: transparent;
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-3);
  text-decoration: none;
  border-radius: var(--radius-ui);
}

.btn--ghost-dark:hover {
  background: rgba(243, 196, 165, .12);
}

/* ===== .eyebrow ===== */
.eyebrow {
  font: 600 var(--fs-eyebrow)/1 var(--f-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-gris);
  margin-bottom: var(--s-2);
}

/* ===== .section ===== */
.section {
  padding-block: var(--s-6);
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--s-12);
  }
}

.section--crema {
  background: var(--c-crema);
  color: var(--c-tinta);
}

.section--papel {
  background: var(--c-papel);
  color: var(--c-tinta);
}

.section--gris {
  background: var(--c-gris);
  color: var(--c-crema);
}

.section--gris .eyebrow {
  color: var(--c-durazno);
}

.section--gris :focus-visible {
  outline-color: var(--c-durazno);
}

.section h2 {
  margin-bottom: var(--s-4);
}

/* ===== .card ===== */
.card {
  background: var(--c-papel);
  border: 1px solid var(--c-piedra);
  border-radius: var(--radius-ui);
  padding: var(--s-3);
}

@media (min-width: 1024px) {
  .card {
    padding: var(--s-4);
  }
}

.card__quote {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--fs-h3);
  color: var(--c-tinta);
  margin-bottom: var(--s-2);
}

.card p:not(.card__quote) {
  color: var(--c-grafito);
}

.card__icon {
  color: var(--c-gris);
  width: 24px;
  height: 24px;
  margin-bottom: var(--s-2);
}

.card h3 {
  margin-bottom: var(--s-1);
}

/* UX12a: h3 de Método y Servicios a la misma altura desde 640, para que las tarjetas no queden desiguales */
@media (min-width: 640px) {
  .metodo__item h3,
  .card h3 {
    min-block-size: calc(2 * 1.25em);
    text-wrap: balance;
  }
}

/* Situaciones */
.situaciones__grid {
  display: grid;
  gap: var(--s-3);
}

@media (min-width: 640px) {
  .situaciones__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4);
  }
}

@media (min-width: 1024px) {
  .situaciones__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Método */
.metodo__list {
  display: grid;
  gap: var(--s-4);
  margin-block: var(--s-4);
}

@media (min-width: 640px) {
  .metodo__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .metodo__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.metodo__num {
  font-family: var(--f-serif);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--c-gris);
  margin-bottom: var(--s-1);
}

.metodo__item p {
  color: var(--c-grafito);
}

.metodo__item h3 {
  margin-bottom: var(--s-1);
}

.metodo__cierre {
  border-top: 1px solid var(--c-piedra);
  padding-top: var(--s-4);
  color: var(--c-grafito);
}

/* Servicios */
.servicios__grid {
  display: grid;
  gap: var(--s-3);
}

@media (min-width: 640px) {
  .servicios__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4);
  }
}

@media (min-width: 1024px) {
  .servicios__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Producto — OptyFab ERP dentro de Servicios */
.producto {
  display: grid;
  gap: var(--s-4);
  grid-template-areas: "text" "view";
  background: var(--c-papel);
  border: 1px solid var(--c-piedra);
  border-radius: var(--radius-ui);
  padding: var(--s-2);
  margin-top: var(--s-6);
}

@media (min-width: 640px) {
  .producto {
    padding: var(--s-4);
  }
}

@media (min-width: 1024px) {
  .producto {
    grid-template-columns: 5fr 7fr;
    grid-template-areas: "text view";
    gap: var(--s-6);
    align-items: center;
    padding: var(--s-6);
  }
}

.producto__text {
  grid-area: text;
}

.producto__text p:not(.eyebrow) {
  color: var(--c-grafito);
  margin-block: var(--s-2) var(--s-3);
}

.producto__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}

.producto__links a:not(.btn) {
  color: var(--c-gris);
  font: 600 var(--fs-btn)/1 var(--f-sans);
  padding-block: .25rem;
}

.producto__view {
  grid-area: view;
}

/* ===== .product-view ===== */
.product-view {
  margin: 0;
  background: var(--c-crema);
  border: 1px solid var(--c-piedra);
  border-radius: var(--radius-view);
  overflow: hidden;
  color: var(--c-tinta);
}

.product-view__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  background: var(--c-papel);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--c-piedra);
  letter-spacing: .08em;
}

.product-view__name {
  font: 600 var(--fs-eyebrow)/1 var(--f-sans);
  text-transform: uppercase;
  color: var(--c-gris);
  white-space: nowrap;
}

.product-view__demo {
  font-size: var(--fs-eyebrow);
  color: var(--c-grafito);
  white-space: nowrap;
}

@media (max-width: 639.98px) {
  .product-view__bar {
    flex-wrap: wrap;
    row-gap: .25rem;
  }
}

.product-view__body {
  padding: var(--s-3);
}

/* Chips */
.chip {
  display: inline-block;
  vertical-align: middle;
  background: var(--c-papel);
  border: 1px solid var(--c-piedra);
  border-radius: var(--radius-ui);
  padding: .25rem var(--s-2);
  font: 600 var(--fs-min)/1.4 var(--f-sans);
  color: var(--c-grafito);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.chip--rojo {
  background: var(--c-rojo);
  border-color: var(--c-rojo);
  color: var(--c-crema);
}

/* En la tabla estrecha de móvil el chip de estado no debe desbordar su celda */
@media (max-width: 639.98px) {
  .product-view td .chip {
    padding-inline: .25rem;
    white-space: nowrap;
  }
  /* Tres columnas visibles (Cliente oculta): anchos fijos para que ni el código ni el chip desborden la celda */
  .product-view th:nth-child(1),
  .product-view td:nth-child(1) { width: 40%; }
  .product-view th:nth-child(3),
  .product-view td:nth-child(3) { width: 26%; }
  .product-view th:nth-child(4),
  .product-view td:nth-child(4) { width: 34%; }
}

/* Vista A — OptyFab: KPI y tabla */
.product-view__kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

/* Cuatro indicadores en fila solo cuando la vista es ancha de verdad (container query): en la portada a 1024 px la vista mide ~440 px y los cuatro no caben */
@container (min-width: 40rem) {
  .product-view__kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.product-view__kpis li {
  border: 1px solid var(--c-piedra);
  border-radius: var(--radius-ui);
  padding: var(--s-2);
}

.product-view__kpi-value {
  display: block;
  font: 600 1.5rem/1.2 var(--f-sans);
  white-space: nowrap;
  color: var(--c-tinta);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 639.98px) {
  .product-view__kpi-value {
    font-size: 1.25rem;
  }
}

.product-view__kpi-label {
  display: block;
  font-size: var(--fs-min);
  color: var(--c-grafito);
}

.product-view__table {
  width: 100%;
  table-layout: fixed;
  font-size: var(--fs-min);
  font-variant-numeric: tabular-nums;
}

.product-view__table th,
.product-view__table td {
  text-align: left;
  padding: var(--s-1) var(--s-2);
  border-bottom: 1px solid var(--c-piedra);
}

.product-view__table th {
  color: var(--c-grafito);
  font-weight: 600;
}

@media (max-width: 639.98px) {
  .product-view__table td:nth-child(2),
  .product-view__table th:nth-child(2) {
    display: none;
  }
  .product-view__table th,
  .product-view__table td {
    padding: var(--s-1) .5rem;
  }
}

/* UX5: primera celda partida en código + descripción, cada uno en su línea */
.orden__codigo,
.orden__desc {
  display: block;
}

.orden__codigo {
  white-space: nowrap;
}

.orden__desc {
  color: var(--c-grafito);
  font-size: var(--fs-min);
}

/* Continuidad y clientes */
.continuidad__top {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}

@media (min-width: 1024px) {
  .continuidad__top {
    grid-template-columns: 5fr 7fr;
    align-items: center;
    gap: var(--s-6);
  }
}

.continuidad__promesa p {
  color: var(--c-grafito);
  margin-bottom: var(--s-3);
}

.continuidad__puntos {
  display: grid;
  gap: var(--s-1);
  color: var(--c-tinta);
  font-weight: 600;
}

.continuidad__clientes {
  border-top: 1px solid var(--c-piedra);
  padding-top: var(--s-6);
}

.continuidad__clientes blockquote {
  max-width: 52rem;
}

.continuidad__sectores {
  color: var(--c-grafito);
  margin-top: var(--s-3);
}

/* ===== .testimonial ===== */
.testimonial {
  margin: 0;
  background: var(--c-papel);
  padding: var(--s-4);
  border-radius: var(--radius-ui);
}

.testimonial p {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--c-tinta);
  margin-bottom: var(--s-2);
}

.testimonial footer {
  font: 500 var(--fs-meta)/1.4 var(--f-sans);
  color: var(--c-grafito);
}

.testimonial--grande {
  padding: var(--s-6);
}

/* Seguridad */
.seguridad__grid {
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 640px) {
  .seguridad__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.seguridad__item h3 {
  margin-bottom: var(--s-1);
}

.seguridad__item p {
  color: var(--c-grafito);
}

/* ===== .faq ===== */
.faq {
  max-width: 48rem;
  border-top: 1px solid var(--c-piedra);
}

.faq details {
  border-bottom: 1px solid var(--c-piedra);
  padding-block: var(--s-2);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  font: 600 1rem/1.4 var(--f-sans);
  color: var(--c-tinta);
}

.faq summary::after {
  content: "+";
  font: 400 1.25rem/1 var(--f-sans);
  color: var(--c-gris);
}

.faq details[open] summary::after {
  content: "−";
}

.faq details p {
  color: var(--c-grafito);
  padding-top: var(--s-2);
  max-width: 65ch;
}

/* Contacto */
.contacto__acciones {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

@media (max-width: 639.98px) {
  .contacto__acciones {
    align-items: stretch;
  }
  .contacto__acciones .btn {
    width: 100%;
  }
}

@media (min-width: 640px) {
  .contacto__acciones {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
}

.contacto__enlace {
  color: var(--c-durazno);
  font: 600 var(--fs-btn)/1 var(--f-sans);
  padding-block: .25rem;
}

.contacto p.container--prose {
  color: var(--c-arena);
  margin-bottom: var(--s-2);
}

/* ===== .site-footer ===== */
.site-footer {
  margin-top: auto;
  background: var(--c-tinta);
  color: var(--c-crema);
  border-top: 1px solid rgba(251, 246, 239, .16);
}

.site-footer :focus-visible {
  outline-color: var(--c-durazno);
}

.site-footer__grid {
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-8) var(--s-4);
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-6);
  }
}

.site-footer__brand {
  display: grid;
  gap: var(--s-2);
}

.site-footer__brand > div {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.site-footer__brand p {
  color: var(--c-piedra);
  font-size: var(--fs-meta);
}

.site-footer__logotext {
  font: 500 1.25rem/1 var(--f-serif);
  letter-spacing: .16em;
  color: var(--c-crema);
}

.site-footer h3 {
  font: 600 var(--fs-meta)/1 var(--f-sans);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-durazno);
  margin-bottom: var(--s-2);
}

.site-footer ul {
  display: grid;
  gap: var(--s-1);
  font-size: var(--fs-meta);
  color: var(--c-piedra);
}

.site-footer__legal {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(251, 246, 239, .16);
  padding-top: var(--s-4);
  font-size: var(--fs-meta);
  color: var(--c-piedra);
}

}