/* Tokens, botones, nav y footer viven en nav-footer.css (2026-09-13, sesion
   de agencia): las paginas standalone del theme (sin wp_head()) lo enlazan
   directo; este @import lo trae para todo lo que usa main.css. Debe ser la
   PRIMERA regla del archivo (regla CSS: @import antes que cualquier otra
   declaracion, salvo @charset). */
@import url("nav-footer.css");

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--crema);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, p {
  margin-top: 0;
}

h1, h2, h3 {
  font-family: "Baloo 2", "Poppins", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.accent-script {
  font-family: "Caveat", cursive;
  font-weight: 600;
}

/* ---------- Hero ---------- */

.hero {
  padding: 64px 0 80px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 48px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--berenjena);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tomate);
  flex: none;
}

.hero h1 {
  font-size: clamp(34px, 5.2vw, 58px);
  margin-bottom: 20px;
}

.hero h1 .hl {
  color: var(--tomate);
}

.hero .lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 480px;
  margin-bottom: 30px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.hero-actions-label {
  font-weight: 700;
  color: var(--berenjena);
  font-size: 15px;
  margin-right: 2px;
}

@media (max-width: 480px) {
  .hero-actions-label {
    flex-basis: 100%;
    margin-bottom: 2px;
  }
}

.hero-note {
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

.offer-card {
  background: var(--tomate);
  color: var(--crema);
  border-radius: 28px;
  padding: 32px;
  box-shadow: 0 26px 50px rgba(242, 75, 56, 0.28);
}

.offer-card .offer-label {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.9;
}

.offer-card .offer-title {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 26px;
  margin: 10px 0 22px;
  line-height: 1.15;
}

.offer-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  border-top: 1px solid rgba(255, 242, 225, 0.35);
  padding-top: 20px;
  margin-bottom: 22px;
}

.offer-price-row .cur {
  font-size: 22px;
  font-weight: 800;
}

.offer-price-row .amount {
  font-family: "Baloo 2", sans-serif;
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
}

.offer-price-row .period {
  font-size: 14px;
  font-weight: 600;
  opacity: 0.85;
  align-self: center;
  margin-left: 4px;
}

.offer-card .btn-crema {
  width: 100%;
}

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
}

.hero-price-line {
  margin-top: 18px;
  font-size: 15px;
  color: var(--muted);
}

.hero-price-line strong {
  color: var(--ink);
  font-weight: 800;
}

.hero-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.hero-phone-frame {
  background: var(--berenjena);
  border-radius: 40px;
  padding: 14px;
  box-shadow: 0 30px 60px rgba(53, 17, 63, 0.35);
  max-width: 260px;
  width: 100%;
  /* 2026-09-15: antes mostraba el screenshot completo (390x844, la
     proporción real de un iPhone) y el hero quedaba desproporcionadamente
     alto porque el texto ya es corto. Se recorta a la parte de arriba
     (cabecera + buscador + "Los más pedidos" con precios), que es lo que
     vende, y se oculta el pie ("Platos del día" + botones Llamar/Pedir). */
  aspect-ratio: 390 / 660;
  overflow: hidden;
}

.hero-phone-frame img {
  border-radius: 28px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.hero-phone-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--berenjena);
  text-decoration: underline;
}

.hero-phone-link:hover {
  color: var(--tomate);
}

/* Mockup de "ventana de navegador" (2026-09-15, /desarrollo-web-restaurantes/):
   este servicio vende la WEB, no la carta -- el hero debe mostrar el sitio
   real (captura ancha, formato horizontal), no el celular con la carta (ese
   sigue igual en la sección "Así se ve la carta que ven tus clientes", más
   abajo en la misma página, que sí es sobre la carta). Mismo lenguaje visual
   que .hero-phone-frame (marco berenjena, sombra), en horizontal. */
.hero-browser {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.hero-browser-frame {
  background: var(--berenjena);
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(53, 17, 63, 0.35);
  overflow: hidden;
  max-width: 480px;
  width: 100%;
}

.hero-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
}

.hero-browser-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 242, 225, 0.3);
}

.hero-browser-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-browser-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--berenjena);
  text-decoration: underline;
}

.hero-browser-link:hover {
  color: var(--tomate);
}

/* Barra fija inferior (2026-09-13: ya no es global -- solo Desarrollo Web la
   usa hoy, el resto de paginas de la agencia no vende un producto unico. La
   pagina que la incluye agrega su propio `body{padding-bottom:74px}` scoped
   justo despues de wp_head(), ver page-desarrollo-web-restaurantes.php). */

.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  background: var(--berenjena);
  color: var(--crema);
  border-top: 1px solid rgba(255, 242, 225, 0.12);
}

.sticky-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
}

.sticky-bar .price-line strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
}

.sticky-bar .price-line span {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 242, 225, 0.72);
}

.sticky-bar .btn {
  min-height: 44px;
  padding: 0 20px;
  font-size: 14px;
  flex: none;
}

@media (max-width: 480px) {
  .sticky-bar .btn-text {
    display: none;
  }

  .sticky-bar .btn {
    width: 44px;
    padding: 0;
    border-radius: 50%;
  }

  .sticky-bar .btn svg {
    margin: 0;
  }
}

/* Franja de confianza */

.trust-strip {
  background: var(--crema);
}

.trust-strip .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 18px;
  padding: clamp(28px, 4vw, 48px) 24px;
}

.trust-card {
  background: var(--crema-suave);
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(53, 17, 63, 0.05);
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.trust-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--crema);
  color: var(--tomate);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.trust-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Grilla de 3 tarjetas con ícono para diferenciadores fuera de un
   .trust-strip (2026-09-15, sección "Especializados en restaurantes"):
   reusa .trust-card/.trust-icon/.trust-text tal cual (no estan atadas a
   .trust-strip), solo agrega su propia tipografia de titulo/parrafo para
   no depender del selector .trust-strip .trust-title (que exige ese
   ancestro y pintaria fondo si se reusara la seccion completa). */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 18px;
  margin-top: 22px;
}

.feature-grid .trust-title {
  font-family: "Baloo 2", sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--berenjena);
  line-height: 1.3;
  margin: 0;
}

.feature-grid .trust-text p:last-child {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.trust-strip h4,
.trust-strip .trust-title {
  font-family: "Baloo 2", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--berenjena);
  line-height: 1.1;
  margin: 0;
}

.trust-strip p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

/* Listas de puntos (dolor) */

.dot-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.dot-list li {
  position: relative;
  padding-left: 22px;
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.5;
}

.dot-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tomate);
}

/* Tarjetas de servicio / ruta */

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.service-card {
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}

.service-card.primary {
  background: var(--berenjena);
  color: var(--crema);
}

.service-card.plain {
  background: var(--white);
  border: 1px solid var(--line);
}

.service-card.upcoming {
  background: transparent;
  border: 2px dashed var(--line);
}

.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(242, 75, 56, 0.1);
  color: var(--tomate);
  margin-bottom: 18px;
}

.service-icon svg {
  width: 23px;
  height: 23px;
}

.service-card.primary .service-icon {
  background: rgba(255, 255, 255, 0.14);
  color: var(--crema);
}

.service-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 13px;
  border-radius: 999px;
  margin-bottom: 16px;
  background: var(--crema-suave);
  color: var(--berenjena);
}

.service-card.primary .service-tag {
  background: var(--tomate);
  color: var(--crema);
}

.service-card.upcoming .service-tag {
  color: var(--muted);
}

.service-card h3 {
  font-size: 21px;
  margin-bottom: 10px;
}

.service-card p.desc {
  color: var(--muted);
  line-height: 1.6;
  font-size: 15px;
  margin-bottom: 16px;
}

.service-card.primary p.desc {
  color: rgba(255, 242, 225, 0.85);
}

.service-card ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
}

.service-card.primary ul {
  color: rgba(255, 242, 225, 0.85);
}

.service-card .service-footer {
  margin-top: auto;
  padding-top: 6px;
}

.service-card .service-price {
  font-weight: 800;
  font-size: 15px;
}

.service-card .service-link {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  color: var(--tomate);
  text-decoration: underline;
}

.service-card.primary .service-price,
.service-card.primary .service-link {
  color: var(--crema);
}

.service-card.upcoming .service-price {
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
}

@media (max-width: 720px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* FAQ */

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 24px;
}

.faq-item summary {
  font-family: "Baloo 2", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--berenjena);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary .plus {
  color: var(--tomate);
  font-size: 22px;
  font-weight: 800;
  transition: transform 0.2s ease;
  flex: none;
}

.faq-item[open] summary .plus {
  transform: rotate(45deg);
}

.faq-item p {
  margin-top: 14px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 15px;
}

[id] {
  scroll-margin-top: 90px;
}

/* Foto destacada */

.feature-photo {
  padding: 0 0 72px;
}

.feature-photo-frame {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(45, 27, 48, 0.2);
}

.feature-photo-frame img {
  width: 100%;
  display: block;
}

@media (max-width: 720px) {
  .feature-photo {
    padding-bottom: 56px;
  }

  .feature-photo-frame {
    border-radius: 18px;
  }
}

/* ---------- Sections ---------- */

.section {
  padding: 72px 0;
}

.section-dark {
  background: var(--berenjena);
  color: var(--crema);
}

.section-white {
  background: var(--white);
}

.section-head {
  max-width: 640px;
  margin: 0 0 44px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.kicker {
  display: block;
  color: var(--tomate);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.section-dark .kicker {
  color: var(--crema);
  opacity: 0.75;
}

.section-head h2 {
  font-size: clamp(28px, 3.4vw, 42px);
}

.section-head p {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}

.section-dark .section-head p {
  color: rgba(255, 242, 225, 0.78);
}

/* Qué incluye */

.includes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.include-card {
  background: var(--crema-suave);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px;
}

.include-card .icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--berenjena);
  color: var(--crema);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}

.include-card .icon svg {
  width: 26px;
  height: 26px;
}

.include-card h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.include-card p {
  color: var(--muted);
  line-height: 1.6;
  font-size: 15.5px;
}

/* Franja menor "incluido" (2026-09-15, /desarrollo-web-restaurantes/):
   mismo grupo que .include-card pero sin icono/H3/lista, para que la carta
   QR se lea como parte de la web (peso menor), no como un segundo producto
   igual -- ver docs/copy/DESARROLLO_WEB_REPLANTEO_20260915.md §2. */
.include-note {
  background: var(--crema);
  border: 1px dashed var(--line);
  border-radius: 16px;
  padding: 20px 24px;
  margin-top: 20px;
}

.include-note-title {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--berenjena);
  margin: 0 0 8px;
}

.include-note p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
}

.check-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.check-list li {
  position: relative;
  padding-left: 26px;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.5;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tomate);
}

.check-list li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  width: 6px;
  height: 3px;
  border-left: 2px solid var(--crema);
  border-bottom: 2px solid var(--crema);
  transform: rotate(-45deg);
}

@media (max-width: 720px) {
  .includes-grid {
    grid-template-columns: 1fr;
  }
}

/* Muestra visual */

.showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 48px;
  align-items: center;
}

.showcase-frame {
  background: var(--crema);
  border-radius: 28px;
  padding: 18px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  transform: rotate(-2deg);
}

.showcase-frame img {
  border-radius: 16px;
  width: 100%;
}

/* Seccion Estadisticas (panel del dueño) */
.stats-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 48px;
  align-items: center;
}

.stats-lead {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 480px;
}

.stats-note {
  margin-top: 18px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

.panel-frame {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 20px 50px rgba(53, 17, 63, 0.12);
}

.panel-frame img {
  display: block;
  width: 100%;
  border-radius: 10px;
}

@media (max-width: 860px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.menu-mock {
  background: var(--white);
  border-radius: 20px;
  padding: 26px 22px 22px;
  position: relative;
}

.menu-mock-badge {
  position: absolute;
  top: -13px;
  left: 22px;
  background: var(--berenjena);
  color: var(--crema);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 13px;
  border-radius: 999px;
}

.menu-mock-header {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--crema);
}

.menu-mock-name {
  display: block;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
}

.menu-mock-tag {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 2px;
}

.menu-mock-section {
  margin-bottom: 14px;
}

.menu-mock-cat {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tomate);
  margin-bottom: 8px;
}

.menu-mock-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px dashed var(--line);
}

.menu-mock-item:last-child {
  border-bottom: none;
}

.menu-mock-item .price {
  color: var(--tomate);
  font-weight: 800;
  flex: none;
}

.menu-mock-cta {
  display: block;
  margin-top: 18px;
  background: var(--berenjena);
  color: var(--crema);
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  padding: 13px;
  border-radius: 12px;
}

@media (max-width: 860px) {
  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .showcase-frame {
    max-width: 380px;
    margin: 0 auto;
    transform: none;
  }
}

/* Proceso */

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.process-step {
  position: relative;
  padding-top: 8px;
}

.process-step .num {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--tomate);
  background: var(--white);
  border: 2px solid var(--tomate);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.process-step h3 {
  font-size: 19px;
  margin-bottom: 8px;
}

.process-step p {
  color: var(--muted);
  line-height: 1.6;
  font-size: 15.5px;
}

/* T4 (14-sep): linea de cierre del proceso (Publicidad y SEO), misma voz que .process-step p */
.process-note {
  margin: 28px auto 0;
  max-width: 640px;
  text-align: center;
  color: var(--muted);
  line-height: 1.6;
  font-size: 15.5px;
}

@media (max-width: 720px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
}

/* CTA final */

.cta-final {
  text-align: center;
}

.cta-final h2 {
  font-size: clamp(30px, 4vw, 46px);
  max-width: 720px;
  margin: 0 auto 18px;
}

.cta-final p {
  max-width: 520px;
  margin: 0 auto 32px;
  font-size: 17px;
  color: rgba(255, 242, 225, 0.8);
  line-height: 1.6;
}

.cta-final .btn {
  min-height: 60px;
  padding: 0 34px;
  font-size: 17px;
}

/* Footer: ahora en nav-footer.css (compartida por template-parts/footer.php) */

/* QA embudo 2026-09-01 */
.panel-frame-caption {
  margin: 10px 0 0;
  font-size: 13px;
  color: #6f5b52;
  text-align: center;
}
.trust-text .trust-title {
  margin: 0;
}