/*
Theme Name: RUTAVET
Theme URI: https://rutavet.cl
Author: Altavoz Media
Author URI: https://altavozmedia.cl
Description: Tema a medida para RUTAVET — vacunación veterinaria a domicilio en Santiago. Autoadministrable: vacunas, precios y todos los textos se editan desde el panel.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: rutavet
*/

/* RUTAVET — hoja de estilos del sitio */
:root{
  --azul:#1E4F8A;--azul-oscuro:#14304F;--celeste:#EAF4FB;--celeste-medio:#9CC7E6;
  --naranjo:#F4A261;--naranjo-hover:#EE9147;--tinta-naranjo:#1F2A36;
  --texto:#2B3440;--texto-2:#3D4855;--texto-3:#5B6673;
  --gris-fondo:#F6F8FA;--borde:#DCE3EA;--borde-suave:#EEF2F5;--borde-input:#C9D3DD;
  --claro-1:#E3EEF7;--claro-2:#DCEBF7;--claro-3:#CFE0EE;
  --whatsapp:#25D366;--whatsapp-hover:#1EBE5A;--blanco:#FFFFFF;
  --sans:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blanco);color:var(--texto);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,ul,ol,dl,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--azul);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--azul-oscuro)}
input,select,textarea,button{font-family:inherit}
.contenedor{max-width:1180px;margin:0 auto;padding-left:24px;padding-right:24px}
.antetitulo{font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--azul)}
.titulo-seccion{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.4vw,38px);line-height:1.15;color:var(--azul-oscuro);text-wrap:balance}
.bajada{font-size:17px;color:var(--texto-3)}
.enlace-texto{font-weight:600;font-size:16px}
.etiqueta{align-self:flex-start;display:inline-block;background:var(--naranjo);color:var(--tinta-naranjo);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:17px;line-height:1.2;padding:16px 26px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;transition:background-color .15s}
.btn-primario{background:var(--naranjo);color:var(--tinta-naranjo)}
.btn-primario:hover{background:var(--naranjo-hover);color:var(--tinta-naranjo)}
.btn-sobre-oscuro:hover{background:var(--blanco);color:var(--tinta-naranjo)}
.btn-contorno-claro{background:transparent;border:1.5px solid var(--blanco);color:var(--blanco);font-weight:600;padding:15px 24px}
.btn-contorno-claro:hover{background:rgba(255,255,255,.12);color:var(--blanco)}
.btn-chico{font-size:15px;padding:12px 18px}
.btn-punto::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tinta-naranjo)}
.acciones{display:flex;gap:12px;flex-wrap:wrap}

/* Encabezado */
.sitio-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--borde)}
.header-interior{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;padding-top:12px;padding-bottom:12px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.marca img{height:60px;width:auto}
.marca-bajada{font-size:13px;line-height:1.35;color:var(--texto-3);letter-spacing:.02em;max-width:9em}
.menu{order:3;flex:1 1 100%;overflow-x:auto;margin:0 -14px}
.menu ul{display:flex;gap:4px}
.menu a{display:block;padding:10px 14px;white-space:nowrap;font-size:15px;font-weight:600;color:var(--texto-2);text-decoration:none;border-bottom:2px solid transparent}
.menu a:hover{color:var(--azul)}
.menu a[aria-current=page]{color:var(--azul);border-bottom-color:var(--azul)}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--azul-oscuro);min-height:min(86vh,760px);display:flex;align-items:flex-end}
.hero-imagen{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:62% 55%}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(20,48,79,.92) 0%,rgba(20,48,79,.78) 38%,rgba(20,48,79,.15) 70%,rgba(20,48,79,0) 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;z-index:1;background:linear-gradient(0deg,rgba(20,48,79,.7),rgba(20,48,79,0))}
.hero-contenido{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:72px}
.hero-texto{display:flex;flex-direction:column;gap:24px;max-width:600px}
.hero .antetitulo{color:var(--celeste-medio)}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(38px,5.4vw,64px);line-height:1.05;color:var(--blanco);text-wrap:balance}
.hero-bajada{font-size:19px;line-height:1.55;color:var(--claro-1);max-width:34em;text-wrap:pretty}

/* Beneficios */
.beneficios{border-bottom:1px solid var(--borde)}
.beneficios ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:32px;padding-top:40px;padding-bottom:40px}
.beneficio{display:flex;gap:16px;align-items:flex-start}
.numero{flex:none;width:40px;height:40px;border-radius:50%;background:var(--celeste);color:var(--azul);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:18px}
.beneficio-texto{display:flex;flex-direction:column;gap:4px}
.beneficio-texto strong{font-size:18px;color:var(--azul-oscuro)}
.beneficio-texto span{font-size:15px;line-height:1.5;color:var(--texto-3)}

/* Pack destacado */
.pack-destacado .contenedor{padding-top:72px;padding-bottom:32px}
.pack-tarjeta{background:var(--azul);color:var(--blanco);border-radius:24px;overflow:hidden;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.pack-foto{width:100%;height:100%;min-height:280px;object-fit:cover;object-position:48% 50%}
.pack-cuerpo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px;align-items:center;padding:clamp(28px,4vw,48px)}
.pack-texto{display:flex;flex-direction:column;gap:16px}
.pack-texto h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4vw,44px);line-height:1.1}
.pack-texto p{font-size:18px;line-height:1.55;color:var(--claro-2);max-width:30em}
.pack-precio{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.precio-linea{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.precio-grande{font-family:var(--serif);font-weight:600;font-size:clamp(52px,7vw,72px);line-height:1}
.precio-nota{font-size:16px;color:var(--claro-2)}
@media (max-width:820px){.pack-tarjeta{grid-template-columns:1fr}.pack-foto{min-height:0;aspect-ratio:16/10}}

/* Precios (inicio) */
.precios .contenedor{display:flex;flex-direction:column;gap:32px;padding-top:40px;padding-bottom:72px}
.seccion-cabecera{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.seccion-cabecera-texto{display:flex;flex-direction:column;gap:8px}
.grilla-especies{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:24px}
.tarjeta-especie{border:1px solid var(--borde);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.tarjeta-especie-foto{width:100%;aspect-ratio:16/7;object-fit:cover}
.foto-perros{object-position:50% 45%}
.foto-gatos{object-position:45% 50%}
.tarjeta-especie-cabecera{padding:22px 28px;background:var(--gris-fondo);border-bottom:1px solid var(--borde);display:flex;justify-content:space-between;align-items:center;gap:12px}
.tarjeta-especie-cabecera h3{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--azul-oscuro)}
.tarjeta-especie-cabecera span{font-size:14px;color:var(--texto-3)}
.lista-precios{padding:8px 28px}
.lista-precios li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--borde-suave)}
.vacuna-nombre{display:flex;flex-direction:column;gap:2px}
.vacuna-nombre strong{font-size:17px;font-weight:600;color:var(--texto)}
.vacuna-nombre span{font-size:14px;color:var(--texto-3)}
.precio{font-family:var(--serif);font-weight:600;font-size:24px;color:var(--azul);white-space:nowrap}
.incluye-banda{margin-top:auto;padding:16px 28px;background:var(--celeste);color:var(--azul-oscuro);font-size:15px;font-weight:600}

/* Pasos (inicio) */
.pasos{background:var(--gris-fondo)}
.pasos .contenedor{display:flex;flex-direction:column;gap:40px;padding-top:72px;padding-bottom:72px}
.pasos ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:24px}
.paso{background:var(--blanco);border:1px solid var(--borde);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:12px}
.paso-numero{font-family:var(--serif);font-weight:600;font-size:40px;line-height:1;color:var(--celeste-medio)}
.paso strong{font-size:20px;color:var(--azul-oscuro)}
.paso p{font-size:16px;line-height:1.55;color:var(--texto-3)}
.pasos .enlace-texto{align-self:flex-start}

/* Confianza y consulta incluida */
.confianza .contenedor,.consulta-incluida .contenedor{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:48px;align-items:center;padding-top:72px;padding-bottom:72px}
.foto-redondeada{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px}
.foto-vet{object-position:50% 45%}
.texto-columna{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.texto-columna p{font-size:18px;line-height:1.6;color:var(--texto-2);text-wrap:pretty}
.nota-aseguradoras{display:flex;gap:14px;align-items:flex-start;padding:20px;border:1px solid var(--borde);border-radius:16px}
.nota-aseguradoras::before{content:"";flex:none;width:10px;height:10px;margin-top:7px;border-radius:50%;background:var(--azul)}
.texto-columna .nota-aseguradoras p{font-size:16px;line-height:1.55;color:var(--texto)}
.consulta-incluida .contenedor{gap:40px;padding-top:64px;padding-bottom:80px}
.consulta-incluida .texto-columna{gap:18px}
.consulta-incluida .texto-columna p{font-size:17px}

/* Cierre */
.cierre{background:var(--azul-oscuro);color:var(--blanco)}
.cierre .contenedor{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;padding-top:72px;padding-bottom:72px}
.cierre h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4vw,44px);line-height:1.12;max-width:18em;text-wrap:balance}
.cierre p{font-size:18px;color:var(--claro-3);max-width:32em}
.cierre .cierre-telefono{font-size:15px}

/* Intro de páginas internas */
.intro-pagina{background:var(--celeste)}
.intro-pagina .contenedor{display:flex;flex-direction:column;gap:16px;padding-top:56px;padding-bottom:56px}
.intro-pagina h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,4.4vw,50px);line-height:1.1;color:var(--azul-oscuro)}
.intro-pagina p{font-size:19px;line-height:1.55;color:var(--texto-2);max-width:36em}

/* Vacunas y precios */
.pack-banda .contenedor{padding-top:48px}
.pack-banda-tarjeta{background:var(--azul);color:var(--blanco);border-radius:20px;padding:28px 32px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.pack-banda-texto{display:flex;flex-direction:column;gap:6px}
.pack-banda-texto .etiqueta{font-size:12px;padding:5px 10px}
.pack-banda-texto strong{font-family:var(--serif);font-weight:600;font-size:28px}
.pack-banda-texto span{font-size:16px;color:var(--claro-2)}
.especie .contenedor{display:flex;flex-direction:column;gap:24px;padding-top:56px;padding-bottom:16px}
.especie-foto{width:100%;aspect-ratio:21/7;object-fit:cover;border-radius:20px}
.especie-cabecera{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;border-bottom:2px solid var(--azul-oscuro);padding-bottom:14px}
.especie-cabecera h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.4vw,38px);color:var(--azul-oscuro)}
.especie-cabecera p{font-size:16px;font-weight:600;color:var(--azul)}
.grilla-vacunas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}
.vacuna{border:1px solid var(--borde);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:16px}
.vacuna-cabecera{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.vacuna-cabecera h3{font-size:20px;font-weight:700;color:var(--azul-oscuro)}
.vacuna-cabecera .precio{font-size:28px}
.vacuna-dato{display:flex;flex-direction:column;gap:4px}
.vacuna-dato h4{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3)}
.vacuna-dato p{font-size:16px;line-height:1.55;color:var(--texto)}
.vacuna-incluye{margin-top:auto;padding-top:14px;border-top:1px solid var(--borde-suave);font-size:14px;font-weight:600;color:var(--azul)}
.nota-calendario .contenedor{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:40px;padding-bottom:80px}
.nota-calendario p{font-size:16px;line-height:1.55;color:var(--texto-3);max-width:40em}

/* Cómo funciona */
.pasos-detalle .contenedor{padding-top:56px;padding-bottom:56px}
.paso-detalle{display:grid;grid-template-columns:72px minmax(0,1fr);gap:24px;padding:28px 0;border-bottom:1px solid var(--borde)}
.paso-detalle .paso-numero{font-size:48px}
.paso-detalle-texto{display:flex;flex-direction:column;gap:8px}
.paso-detalle-texto strong{font-size:22px;color:var(--azul-oscuro)}
.paso-detalle-texto p{font-size:17px;line-height:1.6;color:var(--texto-2);max-width:40em}
.detalles-servicio{background:var(--gris-fondo)}
.detalles-servicio .contenedor{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px;padding-top:64px;padding-bottom:64px}
.detalle{background:var(--blanco);border:1px solid var(--borde);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:14px}
.detalle h2{font-size:20px;font-weight:700;color:var(--azul-oscuro)}
.detalle p{font-size:16px;line-height:1.6;color:var(--texto-2)}
.detalle .detalle-nota{font-size:15px;line-height:1.55;color:var(--texto-3)}
.horarios{display:flex;flex-direction:column;gap:8px}
.horarios div{display:flex;justify-content:space-between;gap:12px}
.horarios div:first-child{padding-bottom:8px;border-bottom:1px solid var(--borde-suave)}
.horarios dt{font-size:16px;color:var(--texto-2)}
.horarios dd{margin:0;font-size:16px;font-weight:700;color:var(--azul-oscuro)}
.lista-puntos{display:flex;flex-direction:column;gap:14px}
.lista-puntos li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.55;color:var(--texto-2)}
.lista-puntos li::before{content:"";flex:none;width:8px;height:8px;margin-top:8px;border-radius:50%;background:var(--azul)}
.lista-puntos-naranjo li::before{background:var(--naranjo)}

/* Contacto */
.contacto .contenedor{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;padding-top:56px;padding-bottom:80px}
.formulario{flex:2 1 480px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px;border:1px solid var(--borde);border-radius:20px;padding:clamp(20px,4vw,36px)}
.formulario[hidden]{display:none}
.campo{display:flex;flex-direction:column;gap:8px;font-size:15px;font-weight:600;color:var(--azul-oscuro)}
.campo-ancho{grid-column:1/-1}
.campo input,.campo select,.campo textarea{font-size:16px;font-weight:400;padding:14px 16px;border:1px solid var(--borde-input);border-radius:12px;background:var(--blanco);color:var(--texto);width:100%}
.campo textarea{resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--azul);outline-offset:1px;border-color:var(--azul)}
.form-acciones{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.form-acciones span{font-size:14px;color:var(--texto-3)}
.form-gracias{flex:2 1 480px;min-width:0;border:1px solid var(--borde);border-radius:20px;padding:36px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;background:var(--celeste)}
.form-gracias[hidden]{display:none}
.form-gracias h2{font-family:var(--serif);font-weight:600;font-size:30px;color:var(--azul-oscuro)}
.form-gracias p{font-size:17px;line-height:1.6;color:var(--texto-2)}
.form-gracias button{background:none;border:0;padding:0;cursor:pointer;color:var(--azul);font-size:16px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.datos-contacto{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:24px}
.dato{display:flex;flex-direction:column;gap:6px}
.dato-etiqueta{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3)}
.dato-telefono{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--azul-oscuro);text-decoration:none}
.dato-correo{font-size:18px}
.dato-precios{padding:20px;background:var(--gris-fondo);border-radius:16px;font-size:15px;line-height:1.55;color:var(--texto-2)}

/* Pie */
.sitio-pie{background:var(--gris-fondo);border-top:1px solid var(--borde)}
.pie-interior{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:40px;padding-bottom:110px}
.pie-marca{display:flex;flex-direction:column;gap:6px}
.pie-marca img{height:72px;width:auto}
.pie-marca p{font-size:14px;color:var(--texto-3)}
.pie-contacto{display:flex;flex-direction:column;gap:6px;font-size:15px}
.wa-flotante{position:fixed;right:20px;bottom:20px;z-index:30;width:62px;height:62px;display:flex;align-items:center;justify-content:center;background:var(--whatsapp);border-radius:50%;box-shadow:0 8px 24px rgba(20,48,79,.25)}
.wa-flotante:hover{background:var(--whatsapp-hover)}
.wa-flotante img{width:34px;height:34px}


/* ==================================================================
 * Menú de hamburguesa en celular. En escritorio no cambia nada.
 * ================================================================== */
.menu-boton{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;padding:0 9px;background:#fff;border:1px solid var(--linea,#dbe6f0);border-radius:10px;cursor:pointer}
.menu-boton span{display:block;height:2px;width:100%;background:var(--azul);border-radius:2px;transition:transform .2s,opacity .2s}
.menu-boton.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-boton.is-open span:nth-child(2){opacity:0}
.menu-boton.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:820px){
  .menu-boton{display:flex}
  .menu{display:none;flex:1 1 100%;order:3;overflow:visible;margin:0}
  .menu.is-open{display:block}
  .menu ul{flex-direction:column;gap:0}
  .menu a{padding:12px 2px;border-bottom:1px solid var(--linea,#e8eef4)}
  .menu a[aria-current=page]{border-bottom-color:var(--azul)}
}

/* ==================================================================
 * Ajustes de revisión — v1.0.1
 * ================================================================== */

/* El logo del pie alineado con el texto que lleva debajo. */
.pie-marca img{align-self:flex-start}

/* El botón flotante de WhatsApp no se queda encima del contenido. */
@media (max-width:820px){
  .wa-flotante{width:54px;height:54px;right:14px;bottom:14px}
  .wa-flotante img{width:30px;height:30px}
  .form-acciones{padding-bottom:64px}
  .nota-calendario .contenedor{padding-bottom:96px}
}

/* Portada en celular: la cortina azul pasa a ser vertical, porque la
 * horizontal del diseño deja el texto sobre la parte clara de la foto
 * cuando la pantalla es angosta. */
@media (max-width:820px){
  .hero{min-height:min(78vh,640px)}
  .hero-imagen{object-position:58% 50%}
  .hero::before{background:linear-gradient(180deg,rgba(20,48,79,.62) 0%,rgba(20,48,79,.78) 45%,rgba(20,48,79,.93) 100%)}
  .hero::after{height:60%;background:linear-gradient(0deg,rgba(20,48,79,.85),rgba(20,48,79,0))}
  .hero-contenido{padding-top:64px;padding-bottom:52px}
  .hero h1{font-size:clamp(32px,8.4vw,42px)}
  .hero-bajada{font-size:17px}
}

/* Cabecera en celular: el botón de agendar sale de la cabecera para que no
 * la parta en dos líneas. El botón flotante y el del menú cubren esa acción. */
@media (max-width:820px){
  .header-interior{gap:8px 14px;padding-top:10px;padding-bottom:10px}
  .header-interior > .btn-primario{display:none}
  .marca img{height:50px}
  .marca-bajada{font-size:12px;max-width:8.5em}
}