/* Suminpet S.A.S. — hoja de estilo única.
 *
 * 🔴 Esta web NO se parece a la de Eco Delivery, y es a propósito (Mario, 17 de septiembre
 *    de 2026: «se parece demasiado a la de eco»). Eco Delivery es azul acero, fría, con
 *    etiquetas al margen y cajitas con borde fino. Suminpet es papel cálido, tinta casi
 *    negra y el azul de su propio logo; el catálogo es una lista desplegable de tipografía grande,
 *    no una rejilla de tarjetas con iconos; y la ficha registral va ARRIBA, en el hero,
 *    no enterrada al final.
 *
 * 🔴 REGLA QUE COSTÓ PUNTOS EN ECO DELIVERY: el h1 del hero es el elemento LCP y NUNCA
 *    arranca en opacity:0. Sus animaciones de entrada son solo transform.
 * Sin fuentes web a propósito: la del sistema aparece en el primer pintado.
 */

:root {
  --papel: #F7F4EF;      /* hueso cálido — nada de gris azulado */
  --blanco: #FFFFFF;
  --tinta: #17181A;
  --tinta-2: #3D3F42;
  --gris: #6E6C66;
  --linea: #DFD8CC;
  /* Azul de marca — manda el logo. Naranja SOLO para lo que se pulsa
     (decidido por Mario el 17 de septiembre de 2026). */
  --azul: #2B4757;         /* MEDIDO en el núcleo del logo original, no inventado */
  --azul-vivo: #3D7396;    /* el mismo tono, más claro, para rótulos sobre papel */
  --naranja: #D9540B;      /* acción: botones, foco, enlaces al pasar */
  --naranja-vivo: #FF7A1F;
  --ancho: 1180px;
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: inherit; }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 22px; }

.salta { position: absolute; left: -9999px; top: 0; background: var(--naranja); color: #fff;
         padding: 10px 16px; font-weight: 700; z-index: 200; }
.salta:focus { left: 0; }

/* Etiqueta pequeña en versalitas — el recurso tipográfico de la casa */
.rotulo {
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--azul-vivo);
}

/* ── Cabecera: clara, fina, sin cristal esmerilado ──────── */

.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.cabecera .envoltura { display: flex; align-items: center; gap: 22px; min-height: 66px; }

.marca {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-weight: 800; font-size: 19px; letter-spacing: .01em;
}
.marca svg { height: 24px; width: auto; display: block; }

.menu { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.menu a {
  text-decoration: none; color: var(--tinta-2);
  padding: 8px 12px; font-size: 15px; font-weight: 600;
  position: relative;
}
/* Subrayado que crece: distinto del botón relleno que usa Eco Delivery */
.menu a:not(.cta-cabecera)::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
  background: var(--naranja); transform: scaleX(0); transform-origin: left;
  transition: transform .22s cubic-bezier(.22,.8,.3,1);
}
.menu a:not(.cta-cabecera):hover::after,
.menu a:not(.cta-cabecera):focus-visible::after { transform: scaleX(1); }

.idioma { border: 1px solid var(--linea); font-weight: 800 !important; font-size: 13px !important; letter-spacing: .08em; padding: 6px 10px !important; }
.cta-cabecera { background: var(--tinta); color: #fff !important; font-weight: 700 !important; padding: 9px 16px !important; transition: background .18s ease; }
.cta-cabecera:hover { background: var(--naranja); }

@media (max-width: 900px) { .menu a:not(.idioma):not(.cta-cabecera) { display: none; } }
/* En un móvil estrecho el botón se partía en dos líneas y descuadraba la cabecera. */
.cta-cabecera { white-space: nowrap; }
@media (max-width: 430px) {
  .marca { font-size: 17px; }
  .menu { gap: 2px; }
  .cta-cabecera { font-size: 13.5px !important; padding: 9px 12px !important; }
  .idioma { font-size: 12px !important; padding: 6px 8px !important; }
}

/* ── Hero: papel, no oscuro. Titular a la izquierda, ficha registral a la derecha ── */

.hero { padding: clamp(46px, 7vw, 86px) 0 clamp(34px, 5vw, 58px); }
.hero .envoltura { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .hero .envoltura { grid-template-columns: 1fr; } }

.hero .rotulo { display: block; margin-bottom: 18px; }

.hero h1 {
  margin: 0 0 22px;
  font-size: clamp(2.3rem, 6.2vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 800;
  max-width: 14ch;
}
.hero h1 em {
  font-style: normal; color: var(--azul-vivo);
  /* El trazo se dibuja solo al cargar: transform, nunca opacity (es el LCP). */
  position: relative; white-space: nowrap;
}
.hero h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .09em;
  background: var(--azul-vivo);
  transform: scaleX(0); transform-origin: left;
  animation: traza .7s .45s cubic-bezier(.22,.8,.3,1) forwards;
}
@keyframes traza { to { transform: scaleX(1); } }

.hero p.entrada { margin: 0 0 28px; max-width: 46ch; font-size: clamp(1.02rem, 2.1vw, 1.17rem); color: var(--tinta-2); }

.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }

.boton {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 26px; font-weight: 700; font-size: 16px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  background: var(--naranja); color: #fff;
  transition: background .18s ease, transform .16s ease;
}
.boton:hover { background: var(--tinta); transform: translateY(-2px); }
.boton:active { transform: translateY(0); }
.boton .flecha { transition: transform .2s ease; }
.boton:hover .flecha { transform: translateX(4px); }

/* Enlace con flecha en vez de un segundo botón: menos ruido, otra voz */
.enlace-flecha {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; text-decoration: none; padding: 4px 0;
  border-bottom: 2px solid var(--tinta);
  transition: color .18s ease, border-color .18s ease;
}
.enlace-flecha:hover { color: var(--naranja); border-color: var(--naranja); }
.enlace-flecha svg { transition: transform .2s ease; }
.enlace-flecha:hover svg { transform: translateX(4px); }

/* La ficha registral, arriba y no al final: es lo primero que comprueba un banco */
.ficha {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-top: 4px solid var(--azul);
  padding: 22px 24px 8px;
}
.ficha h2 { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.ficha dl { margin: 0; }
.ficha dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.ficha dl > div:last-child { border-bottom: 0; }
.ficha dt { margin: 0; color: var(--gris); font-size: .92rem; }
.ficha dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

/* ── Cinta: los seis nombres pasando, como un letrero de almacén ── */

.cinta {
  background: var(--tinta); color: var(--papel);
  border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta);
  overflow: hidden; padding: 13px 0;
}
.cinta .carril { display: flex; width: max-content; animation: corre 34s linear infinite; }
.cinta ul {
  display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0;
  font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.cinta li { padding: 0 26px; position: relative; }
.cinta li::after { content: "◆"; position: absolute; right: -6px; color: var(--naranja); font-size: 9px; top: 50%; transform: translateY(-50%); }
@keyframes corre { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cinta:hover .carril { animation-play-state: paused; }

/* ── Secciones ──────────────────────────────────────────── */

section { padding: clamp(54px, 8vw, 96px) 0; }
.seccion-blanca { background: var(--blanco); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }

/* Encabezado a la izquierda y ancho corto — no centrado */
/* 30ch, no menos: a 24ch un titular de cuatro palabras se partía en tres líneas. */
.encabezado { max-width: 30ch; margin-bottom: clamp(30px, 4vw, 46px); }
.encabezado .rotulo { display: block; margin-bottom: 14px; }
.encabezado h2 { margin: 0; font-size: clamp(1.75rem, 4.4vw, 2.9rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 800; }
.encabezado p { margin: 14px 0 0; color: var(--gris); max-width: 46ch; font-size: 1.02rem; }
.encabezado.ancho { max-width: 46ch; }

/* ── El catálogo: lista desplegable, sin tarjetas y sin iconos ── */

.catalogo { border-top: 1px solid var(--linea); }

.linea-cat {
  border-bottom: 1px solid var(--linea);
  transition: background .25s ease;
}
.linea-cat[open] { background: var(--blanco); }
.linea-cat > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 78px 1fr auto; align-items: baseline; gap: 14px;
  padding: 26px 8px 26px 0;
  transition: padding-left .25s cubic-bezier(.22,.8,.3,1);
}
.linea-cat > summary::-webkit-details-marker { display: none; }
.linea-cat > summary:hover { padding-left: 12px; }
.linea-cat > summary:focus-visible { outline: 2px solid var(--naranja); outline-offset: -4px; }

.num { font-size: 15px; font-weight: 800; color: var(--azul-vivo); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.linea-cat h3 { margin: 0; font-size: clamp(1.3rem, 3.4vw, 2rem); letter-spacing: -.028em; font-weight: 750; line-height: 1.1; }
.mas {
  width: 30px; height: 30px; flex: 0 0 auto; align-self: center;
  border: 1px solid var(--linea); display: grid; place-items: center;
  transition: transform .3s cubic-bezier(.22,.8,.3,1), background .2s ease, border-color .2s ease;
}
.linea-cat > summary:hover .mas { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.linea-cat[open] .mas { transform: rotate(45deg); background: var(--tinta); border-color: var(--tinta); color: #fff; }

.detalle {
  display: grid; grid-template-columns: 78px 1fr 1fr; gap: 14px 34px;
  padding: 0 8px 30px 0;
}
.detalle .vacio { grid-column: 1; }
.detalle p { margin: 0; color: var(--tinta-2); }
.detalle ul { margin: 0; padding: 0; list-style: none; }
.detalle li { padding: 7px 0 7px 20px; border-bottom: 1px solid var(--linea); position: relative; color: var(--tinta-2); font-size: .97rem; }
.detalle li::before { content: ""; position: absolute; left: 0; top: 17px; width: 9px; height: 1px; background: var(--azul-vivo); }
.detalle li:last-child { border-bottom: 0; }
.linea-cat[open] .detalle > * { animation: abre .42s cubic-bezier(.22,.8,.3,1) both; }
.linea-cat[open] .detalle > *:nth-child(3) { animation-delay: .06s; }
@keyframes abre { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .linea-cat > summary { grid-template-columns: 52px 1fr auto; padding: 20px 4px 20px 0; }
  .detalle { grid-template-columns: 1fr; padding-bottom: 24px; }
  .detalle .vacio { display: none; }
}

/* ── Qué mandar para cotizar ────────────────────────────── */

.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
@media (max-width: 800px) { .tres { grid-template-columns: 1fr; gap: 26px; } }
.punto-lista { border-top: 3px solid var(--tinta); padding-top: 18px; }
.punto-lista h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 750; letter-spacing: -.015em; }
.punto-lista p { margin: 0; color: var(--gris); font-size: .98rem; }

/* ── Tres afirmaciones grandes ──────────────────────────── */

.afirmaciones { display: grid; gap: 0; border-top: 1px solid var(--linea); }
.afirmacion {
  display: grid; grid-template-columns: 78px 1fr; gap: 14px 34px;
  padding: 30px 0; border-bottom: 1px solid var(--linea);
}
.afirmacion p { margin: 0; font-size: clamp(1.12rem, 2.6vw, 1.5rem); line-height: 1.35; letter-spacing: -.018em; max-width: 34ch; }
.afirmacion p b { font-weight: 800; }
@media (max-width: 760px) { .afirmacion { grid-template-columns: 52px 1fr; } }

/* ── Contacto: claro, no un bloque oscuro ───────────────── */

.contacto { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 880px) { .contacto { grid-template-columns: 1fr; } }

.directo { list-style: none; margin: 26px 0 0; padding: 0; }
.directo li { border-top: 1px solid var(--linea); }
.directo li:last-child { border-bottom: 1px solid var(--linea); }
.directo a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  text-decoration: none; padding: 16px 0; font-weight: 700;
  transition: padding-left .22s cubic-bezier(.22,.8,.3,1), color .2s ease;
}
.directo a:hover { padding-left: 10px; color: var(--naranja); }
.directo small { font-weight: 500; color: var(--gris); font-size: .93rem; }

form { background: var(--blanco); border: 1px solid var(--linea); border-top: 4px solid var(--tinta); padding: 26px; }
.campo { margin-bottom: 16px; }
.campo label { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: 7px; }
.campo input, .campo select, .campo textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--tinta);
  padding: 12px 13px; border: 1px solid var(--linea); border-radius: 0;
  background: var(--papel);
  transition: border-color .16s ease, background .16s ease;
}
.campo textarea { min-height: 118px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--naranja); background: var(--blanco);
  box-shadow: inset 0 -2px 0 var(--naranja);
}
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .dos { grid-template-columns: 1fr; } }
form .boton { width: 100%; justify-content: center; }
.nota-form { margin: 14px 0 0; font-size: .85rem; color: var(--gris); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Pie ────────────────────────────────────────────────── */

.pie { background: var(--tinta); color: rgba(255,255,255,.7); padding: 54px 0 26px; font-size: .93rem; }
.pie .marca { color: #fff; }
.pie-rejilla { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 34px; }
@media (max-width: 760px) { .pie-rejilla { grid-template-columns: 1fr; gap: 26px; } }
.pie h4 { margin: 0 0 12px; color: #fff; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie a { color: rgba(255,255,255,.7); text-decoration: none; transition: color .16s ease; }
.pie a:hover { color: var(--naranja-vivo); }
.pie-intro { margin: 14px 0 0; max-width: 38ch; }
.pie .legal {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .85rem; color: rgba(255,255,255,.5);
}

/* ── Páginas sencillas (gracias, privacidad, 404) ───────── */

.pagina { padding: clamp(50px, 8vw, 84px) 0 clamp(40px, 6vw, 70px); }
.pagina .envoltura { max-width: 740px; }
.pagina h1 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); letter-spacing: -.032em; margin: 0 0 16px; line-height: 1.08; }
.pagina h2 { font-size: 1.12rem; margin: 34px 0 8px; letter-spacing: -.015em; }
.pagina p, .pagina li { color: var(--tinta-2); }
.pagina ul { padding-left: 20px; }
.pagina .fecha { color: var(--gris); font-size: .9rem; }
.pagina .boton { margin-top: 10px; }

.exito {
  display: grid; place-items: center; width: 56px; height: 56px;
  background: var(--azul); color: #fff; margin-bottom: 22px;
  animation: brota .45s cubic-bezier(.22,1.2,.36,1) both;
}
@keyframes brota { from { transform: scale(.72); } to { transform: scale(1); } }

/* ── Aparición al desplazar ─────────────────────────────── */

.aparece { opacity: 0; transform: translateY(16px); }
.js .aparece { transition: opacity .5s ease, transform .5s cubic-bezier(.22,.8,.3,1); }
.aparece.visible { opacity: 1; transform: none; }
/* Sin JS no se oculta nada: el contenido tiene que verse igual. */
html:not(.js) .aparece { opacity: 1; transform: none; }

/* ── Entrada del hero: SOLO transform (el h1 es el LCP) ─── */

.sube { animation: sube .6s cubic-bezier(.22,.8,.3,1) both; }
@keyframes sube { from { transform: translateY(14px); } to { transform: translateY(0); } }
.d1 { animation-delay: .04s; }
.d2 { animation-delay: .10s; }
.d3 { animation-delay: .17s; }

/* ── Quien no quiere movimiento, no lo tiene ────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .aparece { opacity: 1 !important; transform: none !important; }
  .hero h1 em::after { transform: scaleX(1) !important; }
  .cinta .carril { animation: none !important; }
}