/*
 * REPTOT-193 · La hoja del sitio informativo de reptot.com.
 *
 * Autocontenida: los colores son los de la marca (prototipo/css/reptot.css), copiados aquí y no
 * importados, porque el sitio va a producción tal cual y sin la maqueta del producto al lado.
 * Pensada primero para celular: quien llega por un enlace de WhatsApp llega desde el teléfono.
 */

:root {
  --verde: #1c9455;
  --verde-osc: #157443;
  --verde-claro: #4fcb86;
  --verde-suave: #e7f4ed;
  --naranja: #ef7f1f;
  --naranja-suave: #fdf0e2;
  --pizarra: #2d4a5e;
  --pizarra-osc: #1e3444;
  --pizarra-med: #5a7385;
  --acero: #3e7fa5;
  --acero-suave: #e8f1f7;
  --papel: #f4f6f8;
  --blanco: #ffffff;
  --linea: #dde5ea;
  --texto: #22333f;
  --tenue: #6e8494;
  --gris-claro: #9db4c3;

  --r: 10px;
  --r-g: 14px;
  --sombra: 0 1px 2px rgba(30, 52, 68, 0.06), 0 2px 8px rgba(30, 52, 68, 0.05);
  --sombra-md: 0 2px 4px rgba(30, 52, 68, 0.08), 0 8px 24px rgba(30, 52, 68, 0.1);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 72px; }

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

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

a { color: var(--verde-osc); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 16px; letter-spacing: -0.01em; }
h1 { font-size: clamp(32px, 7vw, 54px); font-weight: 750; }
h2 { font-size: clamp(25px, 4.4vw, 34px); font-weight: 720; }
h3 { font-size: 20px; font-weight: 680; }
p { margin: 0 0 14px; }

.ancho { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.centrado { text-align: center; }

/* --- La barra --------------------------------------------------------------------------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}

.barra-dentro { display: flex; align-items: center; gap: 24px; height: 60px; }
.marca img { width: 108px; }

.menu { display: none; gap: 22px; margin-left: auto; }
.menu a { color: var(--pizarra-med); text-decoration: none; font-size: 15px; font-weight: 560; }
.menu a:hover { color: var(--texto); }

.entrar { position: relative; margin-left: auto; }
.entrar summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 16px;
  border: 1.5px solid var(--pizarra);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 650;
  color: var(--pizarra);
}
.entrar summary::-webkit-details-marker { display: none; }
.entrar[open] summary { background: var(--pizarra); color: var(--blanco); }

.entrar-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 230px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-g);
  box-shadow: var(--sombra-md);
  padding: 6px;
}
.entrar-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--texto);
}
.entrar-menu a:hover { background: var(--papel); }
.entrar-menu strong { display: block; font-size: 15px; }
.entrar-menu span { font-size: 13px; color: var(--tenue); }

/* --- La portada -------------------------------------------------------------------------- */

/*
 * El fondo es una ciudad de noche con las rutas de reparto (portada.webp). **El velo va siempre
 * encima** para que el texto blanco se lea sea cual sea la zona de la imagen: en celular, parejo y
 * más oscuro, porque el texto ocupa todo el ancho; en escritorio, oscuro a la izquierda, donde va
 * el texto, y abierto a la derecha, donde está la ciudad. Y el color de fondo es el de la imagen,
 * por si tarda en llegar.
 */
.portada {
  background-color: var(--pizarra-osc);
  background-image:
    linear-gradient(180deg, rgba(20, 36, 48, 0.78) 0%, rgba(20, 36, 48, 0.62) 55%, rgba(20, 36, 48, 0.86) 100%),
    url("../img/portada-900.webp");
  background-size: cover;
  background-position: 72% center;
  color: var(--blanco);
  padding: 64px 0 72px;
}
.portada-dentro > * { max-width: 600px; }
.etiqueta {
  display: inline-block;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--verde-claro);
  margin-bottom: 18px;
}
.entrada { font-size: clamp(18px, 2.6vw, 21px); color: #d5e1e9; max-width: 640px; margin-bottom: 28px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Botones ----------------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 680;
  text-decoration: none;
  text-align: center;
}
.boton-principal { background: var(--verde); color: var(--blanco); }
.boton-principal:hover { background: var(--verde-osc); }
.boton-claro { background: rgba(255, 255, 255, 0.12); color: var(--blanco); border: 1px solid rgba(255, 255, 255, 0.28); }
.boton-claro:hover { background: rgba(255, 255, 255, 0.2); }
.boton-contorno { border: 1.5px solid var(--verde); color: var(--verde-osc); background: var(--blanco); }
.boton-contorno:hover { background: var(--verde-suave); }

/* --- Secciones --------------------------------------------------------------------------- */

.seccion { padding: 64px 0; }
.seccion-papel { background: var(--papel); }
.seccion p { color: var(--pizarra-med); }

.dos-columnas { display: grid; gap: 36px; align-items: center; }

/* El grupo contra Reptot */
.comparacion {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: var(--r-g);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.comparacion li { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linea); }
.comparacion li:first-child { border-top: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.comparacion span { padding: 12px 14px; font-size: 15px; line-height: 1.4; }
.comparacion .antes { color: var(--tenue); background: var(--papel); }
.comparacion .ahora { color: var(--texto); font-weight: 560; }
.comparacion li:first-child .ahora { color: var(--verde-osc); }

/* Las tres piezas */
.piezas { display: grid; gap: 16px; margin-top: 32px; }
.pieza {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-g);
  padding: 24px;
  box-shadow: var(--sombra);
}
.pieza p { font-size: 16px; }
.pieza-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.pieza-ico svg { width: 22px; height: 22px; }
.pieza-verde { background: var(--verde-suave); color: var(--verde-osc); }
.pieza-acero { background: var(--acero-suave); color: var(--acero); }
.pieza-naranja { background: var(--naranja-suave); color: #c9660f; }
.pieza-quien { margin: 0; font-size: 13px !important; font-weight: 650; color: var(--tenue) !important; }

/* El directorio */
.directorio-dibujo {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 36px 24px;
  border-radius: 20px;
  background:
    radial-gradient(circle, rgba(28, 148, 85, 0.16) 1.5px, transparent 1.6px) 0 0 / 18px 18px,
    linear-gradient(150deg, var(--verde-suave) 0%, var(--acero-suave) 100%);
  overflow: hidden;
}
.directorio-dibujo .ficha { position: relative; max-width: 330px; }
.pin {
  position: absolute;
  right: 28px;
  top: 26px;
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--naranja);
  box-shadow: 0 6px 14px rgba(239, 127, 31, 0.35);
}
.pin::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--blanco);
}
.ficha {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--verde);
  border-radius: var(--r);
  padding: 14px 16px;
  box-shadow: var(--sombra);
}
.ficha-nueva { border-left-color: var(--gris-claro); margin-left: 28px; }
.ficha-tel { font-size: 13px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.ficha-nombre { font-weight: 680; }
.ficha-dir { font-size: 14px; color: var(--pizarra-med); }
.ficha-sello {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--verde-suave);
  color: var(--verde-osc);
}
.ficha-sello-nuevo { background: var(--papel); color: var(--tenue); }

/* Restaurantes */
.aviso-restaurante {
  display: grid;
  gap: 18px;
  justify-items: start;
  background: linear-gradient(135deg, var(--naranja-suave) 0%, #fff7ee 100%);
  border: 1px solid #f6d6b4;
  border-left: 6px solid var(--naranja);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: var(--sombra);
}
.aviso-restaurante h2 { margin-bottom: 8px; }
.aviso-restaurante p { margin: 0; color: #6b5440; }
.aviso-ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--naranja);
  color: var(--blanco);
}
.aviso-ico svg { width: 26px; height: 26px; }
.boton-naranja { background: var(--naranja); color: var(--blanco); }
.avisos { display: grid; gap: 20px; }
.aviso-flotilla {
  background: linear-gradient(135deg, var(--verde-suave) 0%, #f2faf5 100%);
  border-color: #bfe3cd;
  border-left-color: var(--verde);
}
.aviso-flotilla p { color: #3f5a4b; }
.aviso-flotilla .aviso-ico { background: var(--verde); }
.boton-verde { background: var(--verde); color: var(--blanco); }
.boton-verde:hover { background: var(--verde-osc); }
.boton-naranja:hover { background: #c9660f; }

/* Contacto: el cierre, oscuro como la portada */
.cierre {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(79, 203, 134, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(239, 127, 31, 0.18) 0%, transparent 50%),
    linear-gradient(160deg, var(--pizarra-osc) 0%, var(--pizarra) 100%);
  color: var(--blanco);
  padding: 72px 0 80px;
}
.contacto { text-align: center; }
.contacto-entrada { color: #c9d7e0; font-size: 18px; }
.contacto-vias { display: grid; gap: 12px; max-width: 620px; margin: 28px auto 0; }
.via {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 18px 20px;
  border-radius: var(--r-g);
  text-decoration: none;
  color: var(--blanco);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.via:hover { background: rgba(255, 255, 255, 0.14); }
.via-whatsapp { background: var(--verde); border-color: var(--verde); }
.via-whatsapp:hover { background: var(--verde-osc); }
.via-ico {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
}
.via-ico svg { width: 22px; height: 22px; }
.via-tipo { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; }
.via-dato { display: block; font-size: 20px; font-weight: 700; }

/* --- El pie ------------------------------------------------------------------------------ */

.pie { position: relative; padding: 32px 0 36px; background: var(--blanco); }
.pie::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--verde) 0%, var(--verde-claro) 45%, var(--naranja) 100%);
}
.pie-dentro { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.pie p { margin: 0; color: var(--tenue); font-size: 14px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-left: auto; }
.pie nav a { font-size: 14px; color: var(--pizarra-med); }

/* --- Pantallas anchas -------------------------------------------------------------------- */

@media (min-width: 760px) {
  .menu { display: flex; }
  .entrar { margin-left: 8px; }
  .portada {
    background-image:
      linear-gradient(90deg, rgba(20, 36, 48, 0.92) 0%, rgba(20, 36, 48, 0.72) 38%, rgba(20, 36, 48, 0.12) 70%, rgba(20, 36, 48, 0.05) 100%),
      url("../img/portada.webp");
    background-position: center;
    padding: 120px 0 132px;
  }
  .seccion { padding: 88px 0; }
  .dos-columnas { grid-template-columns: 1fr 1fr; gap: 56px; }
  .piezas { grid-template-columns: repeat(3, 1fr); }
  .contacto-vias { grid-template-columns: 1fr 1fr; }
  .aviso-restaurante { grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 32px 36px; }
  .cierre { padding: 96px 0 104px; }
}