/* ══════════════════════════════════════════════════════════════
   ATELIERSS — styles.css
   ──────────────────────────────────────────────────────────────
   Índice:
     1. Reset y variables
     2. Utilidades y animaciones de scroll
     3. Navegación (+ menú móvil)
     4. Hero
     5. Cinta de eventos (marquee)
     6. Catálogo
     7. Portafolio
     8. Planes y precios
     9. Proceso de trabajo
    10. Preguntas frecuentes
    11. Contacto (+ formulario)
    12. Footer
    13. Burbuja de WhatsApp
    14. Lightbox
    15. Responsive / media queries
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   RESET Y VARIABLES
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --fondo:    #F7F5F0;
  --fondo-2:  #EDEAE1;
  --fondo-3:  #E1DCCF;
  --blanco:   #FFFFFF;
  --tinta:    #17171A;
  --tinta-2:  #232326;
  --tinta-3:  #6B6B70;
  --acento:   #FF4D30;
  --acento-2: #FF7A61;
  --dorado:   #D9A441;
  --dorado-2: #E8BE6E;
  --linea:    #E2DFD8;
  --linea-2:  #CFC9BD;
  --serif: 'Space Grotesk', system-ui, sans-serif;
  --sans:  'Plus Jakarta Sans', system-ui, sans-serif;
  --mono:  'Space Mono', 'Courier New', monospace;
  --max:  1240px;
  --pad:  clamp(1rem, 5vw, 2.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  letter-spacing: 0.01em;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

input, select, textarea, button {
  font-family: inherit;
}

/* ── Utilidades y animaciones de scroll ─────────────────────── */
.contenedor {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.revelar.visible {
  opacity: 1;
  transform: none;
}

.revelar[data-d="2"] {
  transition-delay: .08s;
}

.revelar[data-d="3"] {
  transition-delay: .16s;
}

.revelar[data-d="4"] {
  transition-delay: .24s;
}

.h-revelar {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.h-revelar.visible {
  opacity: 1;
  transform: none;
}

.etiqueta {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--acento);
  display: block;
  margin-bottom: .9rem;
}

.titulo-seccion {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--tinta);
}

.titulo-seccion em {
  color: var(--acento);
  font-style: normal;
  font-weight: 700;
}

.desc-seccion {
  font-size: .95rem;
  color: var(--tinta-3);
  max-width: 500px;
  line-height: 1.8;
  margin-top: .9rem;
}

.cabecera-s {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.cabecera-s .desc-seccion {
  margin: .9rem auto 0;
}

.boton-solido {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--tinta-2);
  color: var(--fondo);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .85rem 2rem;
  border: 1px solid var(--tinta-2);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  white-space: nowrap;
  border-radius: 50px;
}

.boton-solido:hover {
  background: var(--acento);
  border-color: var(--acento);
  transform: translateY(-2px);
}

.boton-solido:active {
  transform: translateY(0);
}

.boton-borde {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  color: var(--tinta-2);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .85rem 2rem;
  border: 1px solid var(--linea-2);
  transition: border-color .2s, color .2s, transform .2s, background .2s;
  white-space: nowrap;
  border-radius: 50px;
}

.boton-borde:hover {
  border-color: var(--acento);
  color: var(--acento);
  background: rgba(255,77,48,.05);
  transform: translateY(-2px);
}

.boton-borde:active {
  transform: translateY(0);
}


/* ══════════════════════════════════════════════════════════════
   NAVEGACIÓN
   ══════════════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 1rem var(--pad);
  background: rgba(247,245,240,.97);
  transition: background .3s, border-color .3s;
  gap: 1.5rem;
}

.nav.con-scroll {
  border-bottom: 1px solid var(--linea);
}

.nav-logo {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--tinta);
  margin-right: auto;
}

.nav-enlaces {
  display: flex;
  gap: 1.6rem;
  align-items: center;
}

.nav-enlaces a {
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-2);
  transition: color .2s;
}

.nav-enlaces a:hover {
  color: var(--acento);
}

.nav-boton {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--acento);
  border: 1px solid var(--acento);
  padding: .48rem 1.2rem;
  transition: background .2s, color .2s, transform .2s;
  white-space: nowrap;
  border-radius: 50px;
}

.nav-boton:hover {
  background: var(--acento);
  color: var(--blanco);
  transform: translateY(-1px);
}


/* ── Menú móvil ──────────────────────────────────────────────── */
.hamburguesa {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .4rem;
  flex-direction: column;
  gap: 5px;
  z-index: 1100;
}

.hamburguesa span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--tinta);
  transition: transform .3s, opacity .3s;
  transform-origin: center;
}

.hamburguesa.abierto span:first-child {
  transform: translateY(6.5px) rotate(45deg);
}

.hamburguesa.abierto span:last-child {
  transform: translateY(-6.5px) rotate(-45deg);
}

.menu-movil {
  position: fixed;
  inset: 0;
  background: var(--fondo);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  border-left: 3px solid var(--acento);
}

.menu-movil.abierto {
  opacity: 1;
  pointer-events: all;
}

.menu-movil-cerrar {
  position: absolute;
  top: 1.2rem;
  right: var(--pad);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tinta-3);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s;
}

.menu-movil-cerrar:hover {
  color: var(--acento);
}

.menu-movil-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 0 var(--pad);
}

.enlace-movil {
  font-family: var(--serif);
  color: #0e0e0e;
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 400;
  color: var(--tinta-2);
  padding: .5rem 0;
  width: 100%;
  text-align: center;
  transition: color .2s;
}

.enlace-movil:hover {
  color: var(--acento);
}

.boton-movil {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--acento);
  color: var(--blanco);
  padding: .9rem 2.5rem;
  margin-top: 1.5rem;
  display: inline-block;
  border-radius: 9999px;
}

.menu-movil-redes {
  display: flex;
  gap: .7rem;
  margin-top: 1.5rem;
}

.icono-red {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, color .2s;
}

.icono-red svg {
  width: 16px;
  height: 16px;
}

.icono-red:hover {
  border-color: var(--acento);
  color: var(--acento);
}


/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.hero-izq {
  padding: clamp(7rem, 14vh, 10rem) var(--pad) clamp(4rem, 8vh, 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--fondo);
  border-right: 1px solid var(--linea);
  position: relative;
}

.hero-izq::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 45%;
  background: var(--acento);
}

.hero-der {
  position: relative;
  overflow: hidden;
  background: var(--fondo-3);
  min-height: clamp(320px, 60vh, 800px);
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-titulo {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 5rem);
  font-weight: 400;
  line-height: 1.06;
  color: var(--tinta);
  margin-bottom: 1.5rem;
}

.hero-titulo .linea-cursiva {
  color: var(--acento);
  font-style: normal;
  font-weight: 700;
  display: block;
}

.linea-titulo {
  display: block;
}

.hero-desc {
  font-size: clamp(.9rem, 1.5vw, 1rem);
  color: var(--tinta-3);
  max-width: 420px;
  margin-bottom: 2.2rem;
  line-height: 1.8;
}

.hero-botones {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.hero-redes {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  z-index: 2;
  color: var(--tinta);
}

.hero-red {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, color .2s;
  border-radius: 50px;
}

.hero-red svg {
  width: 16px;
  height: 16px;
}

.hero-red:hover {
  color: var(--acento);
}


/* ── Cinta de eventos (marquee) ──────────────────────────────── */
.ticker {
  background: var(--tinta-2);
  border-top: 1px solid var(--tinta);
  padding: .65rem 0;
  overflow: hidden;
  white-space: nowrap;
}

.ticker-pista {
  display: inline-flex;
  animation: ticker 32s linear infinite;
}

.ticker-pista span {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--linea);
  padding: 0 2rem;
}

.tick-div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .5rem !important;
  color: var(--acento-2) !important;
  letter-spacing: 0 !important;
}

@keyframes ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.sec {
  padding: clamp(4rem, 9vh, 7rem) 0;
}

.s-a {
  background: var(--fondo);
}

.s-b {
  background: var(--fondo-2);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}

.s-c {
  background: var(--fondo-3);
}

.s-d {
  background: var(--blanco);
}


/* ══════════════════════════════════════════════════════════════
   CATÁLOGO
   ══════════════════════════════════════════════════════════════ */
.catalogo {
  background: var(--blanco);
  border-top: 1px solid var(--linea);
  padding: clamp(4rem,9vh,7rem) 0;
}


/* ══════════════════════════════════════════════════════════════
   PORTAFOLIO
   ══════════════════════════════════════════════════════════════ */
.portafolio {
  background: var(--fondo);
  border-top: 1px solid var(--linea);
  padding: clamp(4rem,9vh,7rem) 0;
}

.tipos {
  background: var(--tinta-2);
  border-top: 1px solid var(--tinta);
  padding: clamp(4rem,9vh,7rem) 0;
}


/* ══════════════════════════════════════════════════════════════
   PLANES Y PRECIOS
   ══════════════════════════════════════════════════════════════ */
.planes {
  background: var(--fondo-2);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  padding: clamp(4rem,9vh,7rem) 0;
}


/* ══════════════════════════════════════════════════════════════
   PROCESO DE TRABAJO
   ══════════════════════════════════════════════════════════════ */
.proceso {
  background: var(--blanco);
  border-top: 1px solid var(--linea);
  padding: clamp(4rem,9vh,7rem) 0;
}

.testimonios {
  background: var(--fondo);
  border-top: 1px solid var(--linea);
  padding: clamp(4rem,9vh,7rem) 0;
}


/* ══════════════════════════════════════════════════════════════
   PREGUNTAS FRECUENTES
   ══════════════════════════════════════════════════════════════ */
.faq {
  background: var(--fondo-2);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  padding: clamp(4rem,9vh,7rem) 0;
}


/* ══════════════════════════════════════════════════════════════
   CONTACTO
   ══════════════════════════════════════════════════════════════ */
.contacto {
  background: var(--blanco);
  padding: clamp(4rem, 9vh, 7rem) 0 0;
}

.tipos .etiqueta {
  color: var(--acento-2);
}

.tipos .titulo-seccion {
  color: var(--fondo-2);
}

.tipos .titulo-seccion em {
  color: var(--acento-2);
}

.tipos .desc-seccion {
  color: var(--tinta-3);
}

.cat-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 3.5rem;
}

.cat-filtro {
  background: none;
  border: 1px solid var(--linea);
  color: var(--tinta-3);
  font-family: var(--mono);
  font-size: .63rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .5rem 1.3rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all .2s;
}

.cat-filtro:hover {
  border-color: var(--tinta-2);
  color: var(--tinta-2);
}

.cat-filtro.activo {
  background: var(--tinta-2);
  border-color: var(--tinta-2);
  color: var(--fondo);
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
}


/* ── Tarjetas del catálogo (mockup de teléfono) ─────────────────── */
.cat-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  cursor: pointer;
}

.cat-nombre {
  font-family: var(--mono);
  font-size: .63rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-3);
  text-align: center;
}

.cat-phone {
  position: relative;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 9 / 18;
  border-radius: 28px;
  background: #111;
  border: 3px solid var(--tinta);
  overflow: hidden;
  transition: transform .35s cubic-bezier(0.16,1,0.3,1);
}

.cat-tarjeta:hover .cat-phone {
  transform: translateY(-6px);
}

.cat-phone::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 8px;
  background: #111;
  border-radius: 9999px;
  z-index: 10;
}

.cat-screen {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  overflow: hidden;
}

.cat-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(0.16,1,0.3,1);
}

.cat-tarjeta:hover .cat-img {
  transform: scale(1.04);
}

.cat-mock {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: 1.5rem 1rem;
  text-align: center;
}

.cm-sub {
  font-family: var(--mono);
  font-size: .52rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.cm-titulo {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--tinta);
  line-height: 1.1;
}

.cm-titulo-s {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--tinta);
  line-height: 1.1;
}

.cm-nombre {
  font-family: var(--serif);
  font-size: .9rem;
  font-style: normal;
  font-weight: 600;
  color: var(--acento);
}

.cm-fecha-s {
  font-family: var(--mono);
  font-size: .52rem;
  letter-spacing: .1em;
  color: var(--tinta-3);
}

.cm-sep {
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .3em;
  color: var(--acento);
}

.cm-estrellas, .cm-corona, .cm-arco, .cm-corazon, .cm-anillos {
  color: var(--acento);
  margin-bottom: .3rem;
}

.cat-info {
  width: 100%;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .4rem;
}

.cat-tags {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  justify-content: center;
}

.cat-tag {
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--fondo-2);
  color: var(--tinta-3);
  border: 1px solid var(--linea);
  padding: .1rem .45rem;
  border-radius: 9999px;
}

.cat-tag-web {
  background: transparent;
  color: var(--acento);
  border-color: var(--acento);
}

.cat-tag-pdf {
  background: transparent;
  color: var(--dorado);
  border-color: var(--dorado-2);
}

.cat-tag-combo {
  background: transparent;
  color: var(--tinta-2);
  border-color: var(--linea-2);
}

.cat-info h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--tinta);
}

.cat-info p {
  font-size: .8rem;
  color: var(--tinta-3);
  line-height: 1.6;
}

.cat-cta {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acento);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: gap .2s;
  margin-top: .2rem;
}

.cat-cta:hover {
  gap: .7rem;
}

.port-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1.5rem;
  justify-items: center;
}

.tarjeta-port {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  cursor: pointer;
}

.port-phone {
  position: relative;
  width: 100%;
  max-width: 180px;
  aspect-ratio: 9 / 18;
  border-radius: 26px;
  background: #0e0e0e;
  border: 3px solid var(--tinta);
  overflow: hidden;
  transition: transform .35s cubic-bezier(0.16,1,0.3,1);
}

.tarjeta-port:hover .port-phone {
  transform: translateY(-7px);
}

.port-phone::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 7px;
  background: #0e0e0e;
  border-radius: 9999px;
  z-index: 10;
}

.port-screen {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  overflow: hidden;
}

.port-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 1.2rem 1rem;
  position: relative;
}

.pp-1 {
  background: #B8CCB4;
}

.pp-2 {
  background: #DCCFA8;
}

.pp-3 {
  background: #A8C0A4;
}

.pp-4 {
  background: #D0C0A0;
}

.pp-label {
  font-family: var(--mono);
  font-size: .5rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(23,23,26,.55);
  text-align: center;
}

.port-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(0.16,1,0.3,1);
}

.tarjeta-port:hover .port-foto {
  transform: scale(1.04);
}

.port-ampliar {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 5;
  background: rgba(255,255,255,.88);
  border: 1px solid var(--linea);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tinta-2);
  opacity: 0;
  transition: opacity .2s, background .2s;
}

.tarjeta-port:hover .port-ampliar {
  opacity: 1;
}

.port-ampliar:hover {
  background: var(--blanco);
}

.port-info {
  width: 100%;
  max-width: 180px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.port-tipo {
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--acento);
  display: block;
}

.port-info h3 {
  font-family: var(--serif);
  font-size: .95rem;
  font-weight: 400;
  color: var(--tinta);
  line-height: 1.3;
}

.port-info p {
  font-size: .78rem;
  color: var(--tinta-3);
  line-height: 1.55;
}

.planes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}


/* ── Tarjeta de precio estilo "ticket" ───────────────────────── */
.ticket {
  background: var(--blanco);
  border: 1.5px dashed var(--linea-2);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color .3s, transform .3s cubic-bezier(0.16,1,0.3,1);
}

.ticket:hover {
  border-color: var(--tinta-2);
  transform: translateY(-5px);
}

.ticket-cuerpo {
  padding: 2rem 1.8rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.ticket-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .2rem;
}

.ticket-folio {
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .18em;
  color: var(--linea-2);
}

.ticket-folio-web {
  color: rgba(255,77,48,.5);
}

.ticket-folio-premium {
  color: rgba(217,164,65,.45);
}

.ticket-tipo {
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .2rem .65rem;
  border-radius: 9999px;
}

.ticket-tipo-pdf {
  border: 1px solid var(--linea-2);
  color: var(--tinta-3);
}

.ticket-tipo-web {
  border: 1px solid var(--acento);
  color: var(--acento);
}

.ticket-tipo-premium {
  border: 1px solid var(--dorado-2);
  color: var(--dorado);
}

.ticket-nombre {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--tinta);
}

.ticket-nombre em {
  font-style: normal;
  font-weight: 700;
  display: block;
}

.ticket         .ticket-nombre em {
  color: var(--tinta-3);
}

.ticket-web     .ticket-nombre em {
  color: var(--acento);
}

.ticket-premium .ticket-nombre em {
  color: var(--dorado);
}

.ticket-desc {
  font-size: .84rem;
  color: var(--tinta-3);
  line-height: 1.7;
}

.ticket-precio-bloque {
  padding: 1rem 0;
  border-top: 1px dashed var(--linea);
  border-bottom: 1px dashed var(--linea);
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.ticket-desde {
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--linea-2);
}

.ticket-precio {
  display: flex;
  align-items: flex-start;
  gap: .12rem;
  line-height: 1;
}

.ticket-moneda {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--tinta-3);
  padding-top: .4rem;
}

.ticket-num {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 400;
  color: var(--tinta);
  line-height: 1;
}

.ticket-web     .ticket-num {
  color: var(--acento);
}

.ticket-premium .ticket-num {
  color: var(--dorado);
}

.ticket-mxn {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .1em;
  color: var(--tinta-3);
  align-self: flex-end;
  padding-bottom: .4rem;
}

.ticket-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.ticket-lista li {
  font-size: .82rem;
  color: var(--tinta-2);
  padding: .45rem 0;
  border-bottom: 1px dashed var(--linea);
  display: flex;
  align-items: center;
  gap: .55rem;
  line-height: 1.4;
}

.ticket-lista li:last-child {
  border: none;
}

.ticket-lista li.no {
  color: var(--tinta-3);
  opacity: .45;
}

.ticket-lista li.si::before {
  content: '';
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='%234A7C5C' stroke-width='1.8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 6.5 11.5 13 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.ticket-lista li.no::before {
  content: '';
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='%236B7A5E' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='5' y1='5' x2='11' y2='11'/%3E%3Cline x1='11' y1='5' x2='5' y2='11'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.ticket-desgarre {
  position: relative;
  height: 1px;
  display: flex;
  align-items: center;
  margin: 0;
}

.ticket-desgarre-circulo {
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--fondo-2);
  border: 1.5px dashed var(--linea-2);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.ticket-desgarre-circulo.izq {
  left: -11px;
}

.ticket-desgarre-circulo.der {
  right: -11px;
}

.ticket-desgarre-linea {
  width: 100%;
  border-top: 1.5px dashed var(--linea-2);
}

.ticket-desgarre-linea-web {
  border-color: rgba(255,77,48,.35);
}

.ticket-desgarre-linea-premium {
  border-color: rgba(217,164,65,.35);
}

.ticket-pie {
  padding: 1.2rem 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.ticket-sello {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ticket-sello-pdf {
  color: var(--tinta-3);
}

.ticket-sello-web {
  color: var(--acento);
}

.ticket-sello-premium {
  color: var(--dorado);
}

.ticket-badge-popular {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--acento);
  background: rgba(255,77,48,.1);
  border: 1px solid rgba(255,77,48,.3);
  padding: .22rem .75rem;
  border-radius: 9999px;
  align-self: flex-start;
}

.ticket-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .85rem 1rem;
  text-decoration: none;
  border: 1.5px dashed;
  transition: all .22s cubic-bezier(0.16,1,0.3,1);
}

.ticket-cta svg {
  transition: transform .22s;
}

.ticket-cta:hover svg {
  transform: translateX(4px);
}

.ticket-cta-pdf {
  border-color: var(--linea-2);
  color: var(--tinta-2);
  background: transparent;
}

.ticket-cta-pdf:hover {
  border-color: var(--tinta-2);
  background: var(--tinta-2);
  color: var(--fondo);
}

.ticket-cta-web {
  border-color: var(--acento);
  color: var(--acento);
  background: transparent;
}

.ticket-cta-web:hover {
  background: var(--acento);
  color: var(--blanco);
  border-style: solid;
}

.ticket-cta-premium {
  border-color: var(--dorado-2);
  color: var(--dorado);
  background: transparent;
}

.ticket-cta-premium:hover {
  background: var(--dorado);
  color: var(--blanco);
  border-style: solid;
}

.ticket-web {
  border-color: rgba(255,77,48,.4);
  background: #FAFDF8;
}

.ticket-web .ticket-desgarre-circulo {
  background: var(--fondo-2);
  border-color: rgba(255,77,48,.35);
}

.ticket-premium {
  border-color: rgba(217,164,65,.35);
  background: #FDFAF3;
}

.ticket-premium .ticket-desgarre-circulo {
  background: var(--fondo-2);
  border-color: rgba(217,164,65,.3);
}

.ticket-premium .ticket-precio-bloque {
  border-color: rgba(217,164,65,.2);
}

.ticket-premium .ticket-lista li {
  border-color: rgba(217,164,65,.15);
}

.planes-nota {
  text-align: center;
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .06em;
  color: var(--tinta-3);
  margin-top: 2.5rem;
}

.planes-nota a {
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s;
}

.planes-nota a:hover {
  color: var(--tinta-2);
}

.proc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  margin-top: clamp(1rem, 4vw, 3rem);
}

.elemento-proc {
  position: relative;
  padding: 2.2rem 1.8rem 2rem;
  background: var(--blanco);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  transition: background .25s;
  overflow: hidden;
}

.elemento-proc:hover {
  background: var(--fondo);
}

.elemento-proc::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(0.16,1,0.3,1);
}

.elemento-proc:hover::after {
  transform: scaleX(1);
}

.proc-conector {
  position: absolute;
  top: 2.6rem;
  right: -10px;
  width: 20px;
  height: 20px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-left: none;
  border-bottom: none;
  transform: rotate(45deg);
  z-index: 2;
  transition: background .25s, border-color .25s;
}

.elemento-proc:hover .proc-conector {
  background: var(--fondo);
  border-color: var(--linea-2);
}

.proc-body {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1;
}

.proc-num {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .2em;
  color: var(--acento);
  display: block;
}

.elemento-proc h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--tinta);
  line-height: 1.2;
}

.elemento-proc p {
  font-size: .84rem;
  color: var(--tinta-3);
  line-height: 1.75;
}

.proc-tiempo {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--linea-2);
  display: inline-block;
  padding-top: .6rem;
  border-top: 1px dashed var(--linea);
  transition: color .25s;
}

.elemento-proc:hover .proc-tiempo {
  color: var(--acento);
}

.faq-interior {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5rem;
  align-items: start;
}

.faq-izquierda {
  position: sticky;
  top: 6rem;
}

.faq-izquierda .desc-seccion {
  max-width: 100%;
}

.faq-elemento {
  border-bottom: 1px solid var(--linea);
}

.faq-elemento:first-child {
  border-top: 1px solid var(--linea);
}

.faq-pregunta {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
  text-align: left;
  color: var(--tinta-2);
  font-size: .9rem;
  font-weight: 400;
  transition: color .2s;
}

.faq-pregunta:hover {
  color: var(--acento);
}

.faq-icono {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--tinta-3);
  transition: transform .3s var(--ease), color .2s;
}

.faq-elemento.abierto .faq-icono {
  transform: rotate(45deg);
  color: var(--acento);
}

.faq-respuesta {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease);
}

.faq-respuesta p {
  font-size: .87rem;
  color: var(--tinta-3);
  line-height: 1.8;
  padding-bottom: 1.2rem;
}

/* ── Paleta específica de esta sección (café oscuro + verde salvia) ── */
.contacto-wrap {
  --cta-oscuro: var(--tinta-2);
  --cta-oscuro-2: #453D34;
  --cta-verde: var(--acento-2);
  --cta-verde-2: var(--acento);
  --cta-crema: var(--fondo);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.contacto-panel {
  padding: clamp(2.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
  align-self: stretch;
}

.contacto-panel-oscuro {
  background: var(--cta-oscuro);
  color: var(--cta-crema);
  display: flex;
  align-items: center;
}

.contacto-hojas {
  position: absolute;
  left: -20px;
  top: 0;
  height: 100%;
  width: 90px;
  opacity: .9;
}

.contacto-panel-contenido {
  position: relative;
  z-index: 1;
  max-width: 360px;
}

.titulo-seccion-claro {
  color: var(--cta-crema);
}

.titulo-seccion-claro em {
  color: var(--cta-verde);
}

.contacto-sub-clara {
  font-size: .88rem;
  color: #C9C2B4;
  line-height: 1.8;
  margin: .9rem 0 2rem;
}

.contacto-datos {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  margin-bottom: 2rem;
  border-top: 1px solid var(--cta-oscuro-2);
  padding-top: 1.6rem;
}

.contacto-datos li {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .85rem;
  color: var(--cta-crema);
}

.contacto-datos li svg {
  color: var(--cta-verde);
  flex-shrink: 0;
}

.contacto-datos li a {
  color: var(--cta-crema);
  transition: color .2s;
}

.contacto-datos li a:hover {
  color: var(--cta-verde);
}

.contacto-redes-claras {
  display: flex;
  gap: .5rem;
}

.contacto-redes-claras .boton-social {
  color: var(--cta-crema);
  border: 1px solid var(--cta-oscuro-2);
}

.contacto-redes-claras .boton-social:hover {
  color: var(--cta-verde);
  border-color: var(--cta-verde);
}

/* ── Panel del formulario: misma tarjeta blanca que el resto del sitio ── */
.contacto-panel-claro {
  background: var(--blanco);
  border-left: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.form-intro-claro {
  font-size: .85rem;
  color: var(--tinta-3);
  line-height: 1.75;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--linea);
}

.form-campo-claro {
  display: flex;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.contacto-panel-claro input,
.contacto-panel-claro select,
.contacto-panel-claro textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--linea);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: .92rem;
  padding: .7rem 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  transition: border-color .2s;
}

.contacto-panel-claro input:focus,
.contacto-panel-claro select:focus,
.contacto-panel-claro textarea:focus {
  border-bottom-color: var(--acento);
}

.contacto-panel-claro input::placeholder,
.contacto-panel-claro textarea::placeholder {
  color: var(--tinta-3);
  opacity: .6;
  font-size: .87rem;
}

.contacto-panel-claro input.error {
  border-bottom-color: #B54060;
}

.contacto-panel-claro select {
  cursor: pointer;
  color: var(--tinta-2);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='%237E9469' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 14px;
  padding-right: 1.4rem;
}

.contacto-panel-claro textarea {
  min-height: 90px;
  resize: none;
  line-height: 1.6;
}

.g-recaptcha {
  transform-origin: left;
}

.form-feedback-claro {
  font-size: .83rem;
  padding: .8rem .9rem;
  display: none;
  line-height: 1.5;
  border: 1px solid transparent;
}

.form-feedback-claro.ok {
  display: block;
  background: var(--fondo);
  border-color: var(--acento);
  color: var(--acento);
}

.form-feedback-claro.error {
  display: block;
  background: var(--fondo);
  border-color: #B54060;
  color: #B54060;
}

.btn-enviar-contacto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: var(--tinta-2);
  color: var(--fondo);
  border: 1px solid var(--tinta-2);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .85rem 2rem;
  cursor: pointer;
  align-self: flex-start;
  border-radius: 50px;
  transition: background .2s, border-color .2s;
  position: relative;
}

.btn-enviar-contacto:hover:not(:disabled) {
  background: var(--acento);
  border-color: var(--acento);
}

.btn-enviar-contacto:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.btn-icono-circulo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-loader {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: var(--fondo);
  border-radius: 50%;
  animation: girar .7s linear infinite;
}

.btn-enviar-contacto.cargando .btn-texto,
.btn-enviar-contacto.cargando .btn-icono-circulo {
  opacity: .5;
}

.btn-enviar-contacto.cargando .btn-loader {
  display: block;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

.form-nota-claro {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .05em;
  color: var(--tinta-3);
}




/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
.pie {
  background: var(--tinta-2);
  border-top: 1px solid var(--tinta);
}

.pie-interior {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 4rem;
  padding: clamp(3rem, 6vh, 4rem) 0;
  border-bottom: 1px solid var(--tinta-2);
}

.pie-logo {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--fondo-2);
  display: block;
  margin-bottom: .8rem;
}

.pie-marca p {
  font-size: .83rem;
  color: var(--tinta-3);
  line-height: 1.75;
}

.pie-redes {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.boton-social {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta-3);
  transition: color .2s;
}

.boton-social svg {
  width: 15px;
  height: 15px;
}

.boton-social:hover {
  color: var(--linea);
}

.pie-columnas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.pie-col {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.pie-col strong {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acento-2);
  margin-bottom: .4rem;
  display: block;
}

.pie-col a {
  font-size: .83rem;
  color: var(--tinta-3);
  transition: color .2s;
}

.pie-col a:hover {
  color: var(--linea);
}

.pie-inferior {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 0;
  flex-wrap: wrap;
  gap: .5rem;
}

.pie-inferior span, .pie-inferior a {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--tinta-3);
}

.pie-inferior a:hover {
  color: var(--linea);
}


/* ══════════════════════════════════════════════════════════════
   BURBUJA FLOTANTE DE WHATSAPP
   ══════════════════════════════════════════════════════════════ */
.wa-burbuja {
  position: fixed;
  bottom: 1.8rem;
  right: 1.8rem;
  z-index: 900;
  height: 62px;
  padding: 0 18px;
  background: #25D366;
  border: 1px solid #25D366;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background .2s, border-color .2s, padding .25s;
}

.wa-burbuja-anillo {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px solid #25D366;
  animation: wa-pulso 2.2s ease-out infinite;
  pointer-events: none;
}

@keyframes wa-pulso {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.6); opacity: 0; }
}

.wa-burbuja svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.wa-burbuja-texto {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: max-width .25s, margin-left .25s;
}

.wa-burbuja:hover {
  background: #1aaa50;
  border-color: #1aaa50;
}

.wa-burbuja:hover .wa-burbuja-texto {
  max-width: 100px;
  margin-left: .55rem;
}


/* ══════════════════════════════════════════════════════════════
   LIGHTBOX (VISOR DE IMÁGENES)
   ══════════════════════════════════════════════════════════════ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.lightbox.visible {
  opacity: 1;
  pointer-events: all;
}

.lightbox-fondo {
  position: absolute;
  inset: 0;
  background: rgba(23,23,26,.88);
}

.lightbox-contenido {
  position: relative;
  z-index: 1;
  max-width: min(90vw, 700px);
  width: 100%;
  background: var(--blanco);
  border: 1px solid var(--linea);
}

.lightbox-cerrar {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 2;
  background: none;
  border: 1px solid var(--linea);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tinta-3);
  transition: color .2s, border-color .2s;
}

.lightbox-cerrar:hover {
  color: var(--acento);
  border-color: var(--acento);
}

.lightbox-img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
}

.lightbox-pie {
  padding: .8rem 1rem;
  border-top: 1px solid var(--linea);
}

.lightbox-titulo {
  font-family: var(--serif);
  font-size: .95rem;
  color: var(--tinta);
}

.lightbox-tipo {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .1em;
  color: var(--acento);
  margin-top: .2rem;
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE / MEDIA QUERIES
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .planes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .nav-enlaces, .nav-boton {
    display: none;
  }
  .hamburguesa {
    display: flex;
  }
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-izq {
    padding-top: clamp(6rem, 12vw, 8rem);
    border-right: none;
    border-bottom: 1px solid var(--linea);
  }
  .hero-izq::after {
    display: none;
  }
  .hero-der {
    min-height: 50vw;
    max-height: 460px;
  }
  .hero-redes {
    flex-direction: row;
    bottom: 1.2rem;
    right: 1.2rem;
    gap: .5rem;
  }
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .port-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .planes-grid {
    grid-template-columns: 1fr;
  }
  .proc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .faq-interior {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .faq-izquierda {
    position: static;
  }
  .pie-interior {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .pie-columnas {
    grid-template-columns: repeat(2, 1fr);
  }
  .contacto-wrap {
    grid-template-columns: 1fr;
  }
  .contacto-panel-claro {
    border-left: none;
    border-top: 1px solid var(--linea);
  }
}

@media (max-width: 960px) {
  .planes-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  :root {
    --pad: 1.1rem;
  }
  .hero-der {
    min-height: 240px;
    max-height: 300px;
  }
  .hero-botones {
    flex-direction: column;
  }
  .hero-botones a, .hero-botones button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .cat-grid {
    grid-template-columns: 1fr;
  }
  .port-grid {
    grid-template-columns: 1fr;
  }
  .proc-grid {
    grid-template-columns: 1fr;
  }
  .pie-interior {
    padding: 2.5rem 0 2rem;
  }
  .pie-columnas {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .pie-inferior {
    flex-direction: column;
    text-align: center;
  }
  .wa-burbuja {
    bottom: 1.1rem;
    right: 1.1rem;
    height: 54px;
    padding: 0 15px;
  }
  .wa-burbuja svg {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 640px) {
  .contacto-panel {
    padding: 2rem var(--pad);
  }
  .contacto-hojas {
    width: 50px;
    opacity: .5;
  }
  .contacto-panel-contenido {
    max-width: none;
  }
  .g-recaptcha {
    transform: scale(.88);
    transform-origin: left;
  }
}

@media (max-width: 480px) {
  .hero-titulo {
    font-size: clamp(2.2rem, 9vw, 3rem);
  }
  .titulo-seccion {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
  }
  .ticket-cuerpo {
    padding: 1.5rem 1.3rem 1.2rem;
  }
  .ticket-pie {
    padding: 1rem 1.3rem 1.4rem;
  }
  .elemento-proc {
    padding: 1.5rem 1rem;
  }
  .cabecera-s {
    margin-bottom: 2rem;
  }
}

@media (max-width: 380px) {
  .g-recaptcha {
    transform: scale(.78);
    transform-origin: left;
  }
}