/*
Theme Name: Arisat
Theme URI: https://arisat.es/
Author: Arisat Mallorca SL
Description: Tema a medida para Arisat Mallorca, Servicio Técnico Oficial de Ariston, Wolf, Chaffoteaux y Fleck. Diseño basado en el libro de marca: rojo del logotipo, tipografías sustitutas de Futura y Monument Extended, y blanco dominante.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arisat
Tags: servicio-tecnico, empresa, una-columna, personalizable
*/

:root{
  --rojo:#e52827;          /* rojo del logo Arisat */
  --rojo-hondo:#c8102e;    /* rojo Ariston del libro de marca */
  --negro:#1a171b;
  --azul:#007ed3;          /* azul frio del isotipo */
  --tinta:#2a2529;
  --gris:#6b6469;
  --linea:#e6e1e3;
  --nieve:#f7f5f6;
  --papel:#fff;
  --sombra:0 10px 30px rgb(26 23 27 / 8%);
  --ancho:1180px;
  --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:Jost,"Futura","Century Gothic",system-ui,sans-serif;
  font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:Archivo,Jost,system-ui,sans-serif;line-height:1.06;letter-spacing:-.015em;margin:0;color:var(--negro)}
h1{font-size:clamp(2.25rem,5.2vw,3.65rem);font-weight:700}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700}
h3{font-size:1.1875rem;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1rem}
.caja{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}
.rotulo{font:600 .75rem/1 Jost,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--rojo);margin:0 0 .85rem}
.rotulo--claro{color:#ffb3ac}
.seccion{padding:5rem 0}
.seccion--nieve{background:var(--nieve)}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px}

/* ---------- maqueta: marcas de dato pendiente ---------- */
.pdte{background:#fff3bf;box-shadow:0 0 0 1px #f0d86a;border-radius:3px;padding:0 .18em}
.aviso-maqueta{background:var(--negro);color:#fff;font-size:.8125rem;padding:.5rem 1rem;text-align:center;letter-spacing:.02em;margin:0}
.aviso-maqueta b{color:#ffe27a}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.6rem;border-radius:999px;font:600 1.0625rem/1 Jost,sans-serif;
  background:var(--rojo);color:#fff;border:2px solid var(--rojo);transition:.15s;white-space:nowrap;cursor:pointer;
}
.btn:hover{background:var(--rojo-hondo);border-color:var(--rojo-hondo)}
.btn--linea{background:transparent;color:var(--negro);border-color:#cfc8cb}
.btn--linea:hover{background:var(--negro);border-color:var(--negro);color:#fff}
.btn--claro{background:#fff;color:var(--rojo-hondo);border-color:#fff}
.btn--claro:hover{background:var(--negro);border-color:var(--negro);color:#fff}
.btn svg{width:20px;height:20px;flex:none}
.enlace{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--rojo);border-bottom:2px solid #f5c4c1;padding-bottom:2px}
.enlace:hover{border-color:var(--rojo)}

/* ---------- cabecera ---------- */
.tira{background:var(--negro);color:#cfc8cb;font-size:.8125rem}
.tira__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.35rem}
.tira b{color:#fff;font-weight:600}
.idiomas{display:flex;gap:.15rem;align-items:center}
.idiomas a{padding:.15rem .45rem;border-radius:4px;font-size:.75rem;letter-spacing:.06em;font-weight:600}
.idiomas a[aria-current]{background:var(--rojo);color:#fff}
.cab{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--linea)}
.cab__in{display:flex;align-items:center;gap:1.5rem;min-height:4.75rem}
.cab__in > a:first-child{flex:none}
.cab__logo{height:58px;width:auto;flex:none}
.nav{display:flex;gap:1.4rem;margin-left:auto;font-size:.9375rem;font-weight:500}
.nav a{padding:.35rem 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--rojo);color:var(--negro)}
.cab__tel{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.0625rem;color:var(--negro);white-space:nowrap}
.cab__tel svg{width:22px;height:22px;color:var(--rojo)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--linea);border-radius:8px;padding:.55rem .8rem;font:600 .8125rem Jost,sans-serif;letter-spacing:.08em}

/* ---------- portada ---------- */
.portada{position:relative;overflow:hidden;padding:3.5rem 0 4rem}
.portada__curva{position:absolute;right:-6%;top:-14%;width:min(56%,720px);height:auto;z-index:0;pointer-events:none}
.portada__in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center}
.portada h1{margin-bottom:1rem}
.portada__sub{font-size:1.1875rem;color:var(--gris);max-width:34rem}
.acciones{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.75rem 0 1.5rem}
.hechos{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;padding-top:1.35rem;border-top:1px solid var(--linea);font-size:.9375rem;color:var(--gris)}
.hechos div{display:flex;align-items:center;gap:.55rem}
.hechos svg{width:19px;height:19px;color:var(--rojo);flex:none}
.portada__foto{border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra)}
.portada__pie{margin:.85rem 0 0;font-size:.875rem;color:var(--gris)}

/* ---------- que te ocurre ---------- */
.problemas{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.25rem}
.prob{display:block;background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:1.75rem 1.5rem 1.5rem;transition:.15s}
.prob:hover{border-color:var(--rojo);box-shadow:var(--sombra);transform:translateY(-2px)}
.prob__ico{width:44px;height:44px;color:var(--rojo);margin-bottom:1.1rem}
.prob h3{margin-bottom:.5rem}
.prob p{font-size:.9375rem;color:var(--gris);margin-bottom:.9rem}
.prob span{font:600 .875rem Jost,sans-serif;color:var(--rojo)}
.atajos{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.atajo{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--linea);background:#fff;border-radius:999px;padding:.6rem 1.1rem;font-size:.9375rem;font-weight:500}
.atajo:hover{border-color:var(--negro)}
.atajo svg{width:17px;height:17px;color:var(--gris)}

/* ---------- cifras ---------- */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
.cifra strong{display:block;font-family:Archivo,sans-serif;font-size:2.35rem;font-weight:700;color:var(--negro);line-height:1}
.cifra .pdte{background:#fff6d1;box-shadow:0 0 0 1px #ecd98a}
.cifra span{display:block;font-size:.9375rem;color:var(--gris);margin-top:.45rem}

/* ---------- marcas ---------- */
/* los logos vienen sobre blanco: van dentro de una tarjeta blanca para que
   no se vea el recuadro de cada uno contra el fondo gris */
.marcas{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;align-items:center;margin:2.25rem 0 2rem;
        background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:1.5rem 1.25rem}
.marcas img{width:100%;max-width:200px;height:auto;margin-inline:auto}
.oficial{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;padding-top:2rem;border-top:1px solid var(--linea)}
.oficial div.item{display:flex;gap:.85rem}
.oficial svg{width:24px;height:24px;color:var(--rojo);flex:none;margin-top:2px}
.oficial strong{display:block;margin-bottom:.2rem;color:var(--negro)}
.oficial p{font-size:.9375rem;color:var(--gris);margin:0}

/* ---------- mantenimiento ---------- */
.manten{background:var(--rojo-hondo);color:#fff;border-radius:var(--r);overflow:hidden}
.manten__in{display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center;padding:3.25rem 3rem}
.manten h2{color:#fff}
.manten p{color:#ffd6d2}
.manten__ficha{background:#fff;border-radius:var(--r);padding:2rem}
.manten__ficha h3{margin-bottom:1.1rem}
.manten ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.manten li{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem;color:var(--tinta)}
.manten li svg{width:20px;height:20px;flex:none;margin-top:3px;color:var(--rojo)}

/* ---------- empresas ---------- */
.empresas{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.25rem}
.empresa{border:1px solid var(--linea);border-radius:var(--r);padding:1.5rem;background:#fff}
.empresa svg{width:30px;height:30px;color:var(--azul);margin-bottom:.9rem}
.empresa h3{font-size:1.0625rem;margin-bottom:.4rem}
.empresa p{font-size:.9063rem;color:var(--gris);margin:0}

/* ---------- faq ---------- */
.faq{max-width:56rem;margin-top:2rem}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;font:600 1.0625rem Jost,sans-serif;color:var(--negro);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.5rem;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--rojo);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .resp{padding:0 2.5rem 1.35rem 0;color:var(--gris);font-size:1rem}
.faq .resp p:last-child{margin-bottom:0}

/* ---------- zonas ---------- */
.zonas{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.zonas span{background:#fff;border:1px solid var(--linea);border-radius:999px;padding:.4rem .9rem;font-size:.875rem;color:var(--gris)}

/* ---------- contacto ---------- */
.contacto{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.datos{display:grid;gap:1.35rem;margin-top:1.75rem}
.dato{display:flex;gap:1rem}
.dato svg{width:22px;height:22px;color:var(--rojo);flex:none;margin-top:3px}
.dato strong{display:block;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);font-weight:600;margin-bottom:.15rem}
.dato a,.dato p{font-size:1.0625rem;color:var(--negro);margin:0}
.formulario{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:2rem;box-shadow:var(--sombra)}
.formulario h3{margin-bottom:.35rem}
.formulario > p{font-size:.9375rem;color:var(--gris);margin-bottom:1.35rem}
.campo{margin-bottom:1rem}
.campo label{display:block;font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin-bottom:.35rem}
.campo input,.campo select,.campo textarea{
  width:100%;padding:.8rem .9rem;border:1px solid #d7d1d4;border-radius:9px;
  font:400 1rem Jost,sans-serif;color:var(--negro);background:#fff;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--azul);outline:none;box-shadow:0 0 0 3px rgb(0 126 211 / 12%)}
.campo textarea{min-height:96px;resize:vertical}
.par{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.opcional{font-weight:400;text-transform:none;letter-spacing:0;color:#a49da0}
.formulario .btn{width:100%;margin-top:.35rem}
.formulario small{display:block;margin-top:.9rem;font-size:.8125rem;color:var(--gris);line-height:1.45}

/* ---------- pie ---------- */
.pie{background:var(--negro);color:#a9a2a6;padding:3.5rem 0 0;font-size:.9375rem}
.pie__in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:2.75rem}
.pie h2{font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:.9rem;font-family:Jost,sans-serif;font-weight:600}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.pie a:hover{color:#fff}
.pie__logo{height:52px;width:auto;margin-bottom:1.1rem}
.pie__abajo{border-top:1px solid #332e32;padding:1.35rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.875rem}

/* ---------- barra movil ---------- */
.barra-movil{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:#fff;border-top:1px solid var(--linea);padding:.55rem .75rem;
  box-shadow:0 -6px 22px rgb(26 23 27 / 12%);gap:.5rem;
}
.barra-movil a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.85rem .5rem;border-radius:10px;font:600 .9375rem Jost,sans-serif;
}
.barra-movil svg{width:19px;height:19px}
.bm-tel{background:var(--rojo);color:#fff}
.bm-wa{background:#25d366;color:#0b3d20}
.bm-cita{background:var(--nieve);color:var(--negro);border:1px solid var(--linea)}

@media (max-width:960px){
  .portada__in,.manten__in,.contacto{grid-template-columns:1fr}
  .manten__in{padding:2.5rem 1.75rem}
  .portada__curva{display:none}
  .problemas,.empresas{grid-template-columns:1fr 1fr}
  .cifras{grid-template-columns:1fr 1fr;gap:1.75rem}
  .oficial{grid-template-columns:1fr}
  .pie__in{grid-template-columns:1fr 1fr}
}
/* por debajo de 1000 px la navegacion ya no cabe al lado del logo y el telefono */
@media (max-width:1000px){
  .nav{display:none}
  .menu-btn{display:block}
  .nav.abierto{
    display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:#fff;border-bottom:1px solid var(--linea);padding:.5rem 1.25rem 1.25rem;
    box-shadow:var(--sombra);margin-left:0;z-index:70;
  }
  .nav.abierto a{padding:.85rem 0;border-bottom:1px solid var(--linea)}
  .nav.abierto a:last-child{border-bottom:0;margin-top:.75rem}
  .cab{position:relative}
}
@media (max-width:760px){
  .seccion{padding:2.75rem 0}
  /* en movil las tarjetas se apilan: bajamos aire para no alargar la pagina */
  .prob{padding:1.35rem 1.25rem 1.25rem}
  .prob__ico{width:34px;height:34px;margin-bottom:.7rem}
  .prob p{margin-bottom:.7rem}
  .problemas{gap:.85rem;margin-top:1.6rem}
  .empresa{padding:1.25rem}
  h1{font-size:2.05rem}
  .cab__tel span{display:none}
  /* el logo entero no cabe con el boton y el telefono: baja a 46 px de alto,
     que son 178 px de ancho, muy por encima de los 57 px minimos del manual */
  .cab__logo{height:46px}
  .cab__in{gap:.75rem;min-height:4.25rem}
  .problemas,.empresas{grid-template-columns:1fr}
  .barra-movil{display:flex}
  body{padding-bottom:4.6rem}
  .portada{padding:2.25rem 0 2.5rem}
  .acciones .btn{flex:1;min-width:13rem}
  .pie__in{grid-template-columns:1fr;gap:1.75rem}
  .par{grid-template-columns:1fr}
}

/* ============================================================
   PAGINAS INTERIORES
   ============================================================ */

/* cabecera de pagina */
.cabecera-pagina{background:var(--nieve);border-bottom:1px solid var(--linea);padding:2.75rem 0 3rem}
.cabecera-pagina h1{font-size:clamp(1.95rem,4.2vw,3rem);max-width:22ch;text-wrap:balance}
.cabecera-pagina .lead{font-size:1.1875rem;color:var(--gris);max-width:46rem;margin:1.1rem 0 0}
.miga{font-size:.8125rem;color:var(--gris);margin:0 0 1rem}
.miga a{border-bottom:1px solid transparent}
.miga a:hover{color:var(--rojo);border-color:var(--rojo)}

/* bloque de contenido a dos columnas */
.bloque{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;padding:2.75rem 0;border-top:1px solid var(--linea)}
.bloque--primero{border-top:0;padding-top:0}
.bloque h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.85rem}
.bloque p{color:var(--gris)}
.bloque p:last-child{margin-bottom:0}

.lista-check{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.lista-check li{display:flex;gap:.65rem;align-items:flex-start;font-size:1rem}
.lista-check svg{width:19px;height:19px;color:var(--rojo);flex:none;margin-top:4px}
.ficha{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:1.75rem}
/* un svg suelto dentro de una ficha es su icono: sin esto sale a tamano natural y en negro */
.ficha > svg,.ficha > svg.prob__ico{width:38px;height:38px;color:var(--rojo);margin-bottom:1rem}
.ficha h3{margin-bottom:1rem}
.ficha--nieve{background:var(--nieve);border-color:transparent}

/* pasos: solo donde el orden significa algo de verdad */
.pasos{counter-reset:paso;display:grid;gap:1.5rem;margin:2rem 0 0;padding:0;list-style:none}
.paso{display:grid;grid-template-columns:2.75rem 1fr;gap:1.25rem;align-items:start}
.paso::before{
  counter-increment:paso;content:counter(paso);
  width:2.75rem;height:2.75rem;border-radius:50%;background:var(--rojo);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font:700 1.125rem/1 Archivo,sans-serif;
}
.paso h3{margin-bottom:.4rem;line-height:1.2}
.paso p{color:var(--gris);margin:0;font-size:1rem;line-height:1.5}

/* aviso de seguridad */
.aviso{border-left:4px solid var(--rojo);background:#fff5f4;padding:1.35rem 1.6rem;border-radius:0 10px 10px 0;margin:2rem 0}
.aviso strong{display:block;color:var(--negro);margin-bottom:.3rem}
.aviso p{margin:0;color:var(--tinta);font-size:.9688rem}

/* tabla */
.tabla-caja{overflow-x:auto;margin-top:1.75rem;border:1px solid var(--linea);border-radius:var(--r);background:#fff}
table{border-collapse:collapse;width:100%;min-width:32rem}
caption{text-align:left;padding:1.1rem 1.25rem .35rem;font-weight:600;color:var(--negro)}
th,td{text-align:left;padding:.85rem 1.25rem;border-bottom:1px solid var(--linea);font-size:.9375rem;vertical-align:top}
th{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);font-weight:600}
tbody tr:last-child td{border-bottom:0}

/* texto largo: legales */
.prosa{max-width:44rem;color:var(--gris)}
.prosa h2{font-size:1.3125rem;margin:2.5rem 0 .75rem;color:var(--negro)}
.prosa h3{font-size:1.0625rem;margin:1.6rem 0 .5rem}
.prosa ul{padding-left:1.2rem;margin:0 0 1rem}
.prosa li{margin-bottom:.4rem}
.prosa dl{margin:0 0 1rem}
.prosa dt{font-weight:600;color:var(--negro);margin-top:.9rem}
.prosa dd{margin:0}

/* rejilla generica de tarjetas */
.rejilla{display:grid;gap:1.25rem;margin-top:2rem}
.rejilla--2{grid-template-columns:repeat(2,1fr)}
.rejilla--3{grid-template-columns:repeat(3,1fr)}

/* llamada final de pagina */
.cierre{background:var(--negro);color:#cfc8cb;border-radius:var(--r);padding:2.75rem 3rem;
        display:flex;gap:2rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cierre h2{color:#fff;max-width:24ch}
.cierre p{margin:.6rem 0 0;max-width:44ch}
.cierre .acciones{margin:0;flex-shrink:0}

/* menu movil */
@media (max-width:760px){
  .cabecera-pagina{padding:2rem 0 2.25rem}
  .bloque,.rejilla--2,.rejilla--3{grid-template-columns:1fr;gap:1.75rem}
  .bloque{padding:2rem 0}
  .cierre{padding:2rem 1.75rem;flex-direction:column;align-items:flex-start}
  .paso{grid-template-columns:2.25rem 1fr;gap:1rem}
  .paso::before{width:2.25rem;height:2.25rem;font-size:1rem}
}
@media (max-width:960px){
  .rejilla--3{grid-template-columns:1fr 1fr}
}

/* ============================================================
   AJUSTES PROPIOS DE WORDPRESS
   Clases que WordPress anade por su cuenta y que hay que vestir.
   ============================================================ */
.entry-content > *{margin-bottom:1.25rem}
.entry-content > *:last-child{margin-bottom:0}
.alignwide{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}
.alignfull{width:100%}
.wp-block-image img{border-radius:var(--r)}
.wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.6rem;border-radius:999px;font:600 1.0625rem/1 Jost,sans-serif;
  background:var(--rojo);color:#fff;border:2px solid var(--rojo);
}
.wp-block-button__link:hover{background:var(--rojo-hondo);border-color:var(--rojo-hondo)}
.is-style-outline .wp-block-button__link{background:transparent;color:var(--negro);border-color:#cfc8cb}
.wp-block-quote{border-left:4px solid var(--rojo);padding-left:1.25rem;margin-left:0;font-style:normal}
.wp-block-table td,.wp-block-table th{border-color:var(--linea)}
.screen-reader-text{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);white-space:nowrap;
}
/* barra de administracion: que no tape la cabecera fija */
.admin-bar .cab{top:32px}
@media (max-width:782px){.admin-bar .cab{top:46px}}