/*
Theme Name: Perico Ripiao Tours Theme
Theme URI: https://pericoripiaotours.com
Author: Perico Ripiao Tours
Author URI: https://pericoripiaotours.com
Description: Tema personalizado para Perico Ripiao Tours con integración de Bokun, optimización de diseño y compatibilidad con Elementor.
Template: togo
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: pericoripiao-tours
*/

/* Custom Logo Adjustments */
.site-logo img,
.site-main-logo,
a.custom-logo-link img,
.elementor-widget-theme-site-logo img,
.elementor-widget-togo-logo img {
    max-height: 45px !important;
    height: 45px !important;
    width: auto !important;
    object-fit: contain !important;
}

header .elementor-container,
.header-main {
    align-items: center !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* Separacion visual entre la barra superior azul y el menu flotante blanco (sitewide, todos los idiomas y variantes de header) */
.site-header > .top-bar + .elementor {
    margin-top: 20px !important;
}

/* About hero desktop: mayor altura, foco de imagen y texto reubicado para no tapar el rostro de la pareja (EN/ES/FR) */
@media (min-width: 1025px) {
  .elementor-9265 .elementor-element.elementor-element-b4efeea,
  .elementor-9999 .elementor-element.elementor-element-b4efeea,
  .elementor-10000 .elementor-element.elementor-element-b4efeea {
      min-height: 560px !important;
      padding-top: 290px !important;
      padding-bottom: 20px !important;
  }
  .elementor-9265 .elementor-element.elementor-element-b4efeea:not(.elementor-motion-effects-element-type-background),
  .elementor-9265 .elementor-element.elementor-element-b4efeea > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-9999 .elementor-element.elementor-element-b4efeea:not(.elementor-motion-effects-element-type-background),
  .elementor-9999 .elementor-element.elementor-element-b4efeea > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-10000 .elementor-element.elementor-element-b4efeea:not(.elementor-motion-effects-element-type-background),
  .elementor-10000 .elementor-element.elementor-element-b4efeea > .elementor-motion-effects-container > .elementor-motion-effects-layer {
      background-position: center 30% !important;
  }
}

/* Blog header: imagen de fondo (temporal, reutilizada de la libreria de medios) con overlay oscuro para mantener legibilidad del texto blanco */
.elementor-element-blh001 {
    background-image: linear-gradient(rgba(38,50,56,.72), rgba(38,50,56,.72)), url("https://pericoripiaotours.com/wp-content/uploads/2026/09/IMG_3031.JPG.jpeg") !important;
    background-size: cover !important;
    background-position: center 30% !important;
}

/* About Us hero: degradado oscuro hacia abajo, igual tratamiento que el header del Blog, para dar mas contraste y consistencia visual */
.elementor-9265 .elementor-element.elementor-element-b4efeea::after,
.elementor-9999 .elementor-element.elementor-element-b4efeea::after,
.elementor-10000 .elementor-element.elementor-element-b4efeea::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(38,50,56,.55);
    pointer-events: none;
    z-index: 1;
}
.elementor-9265 .elementor-element.elementor-element-b4efeea > .e-con-inner,
.elementor-9999 .elementor-element.elementor-element-b4efeea > .e-con-inner,
.elementor-10000 .elementor-element.elementor-element-b4efeea > .e-con-inner {
    position: relative;
    z-index: 2;
}

/* Home: fila de imagenes circulares ("Welcome to Perico Ripiao Tours") como carrusel deslizable en movil, para que no se vea cortada sin indicacion de que se puede interactuar */
@media (max-width: 767px) {
  .elementor-element-1099856e {
      overflow-x: auto !important;
      overflow-y: visible !important;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      justify-content: flex-start !important;
      padding-left: 40px !important;
      padding-right: 40px !important;
      scrollbar-width: none;
  }
  .elementor-element-1099856e::-webkit-scrollbar {
      display: none;
  }
  .elementor-element-1099856e > .elementor-widget-image {
      flex-shrink: 0;
      scroll-snap-align: center;
  }
}

/* Home: acordeon "ver mas" para la seccion de resenas (Google/TripAdvisor via Trustindex) */
.elementor-element-64a087d {
    transition: max-height .6s ease;
}
.elementor-element-64a087d.pr-reviews-collapsed {
    max-height: 490px;
    overflow: hidden;
    position: relative;
}
@media (max-width: 1199px) {
  .elementor-element-64a087d.pr-reviews-collapsed {
      max-height: 420px;
  }
}
@media (max-width: 767px) {
  .elementor-element-64a087d.pr-reviews-collapsed {
      max-height: 480px;
  }
}
.elementor-element-64a087d.pr-reviews-collapsed::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 110px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #ffffff);
    pointer-events: none;
}
.pr-reviews-toggle-wrap {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.pr-reviews-toggle-btn {
    background: #ffffff;
    border: 2px solid #e63946;
    color: #e63946;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 15px;
    transition: background .2s ease, color .2s ease;
}
.pr-reviews-toggle-btn:hover {
    background: #e63946;
    color: #ffffff;
}

/* Footer: reducir espacios y compactar (sitewide, todos los idiomas comparten los mismos IDs de Elementor) */
.elementor-element-55e8856 {
    padding-top: 30px !important;
    padding-bottom: 16px !important;
}
.elementor-element-41300c3 {
    gap: 10px !important;
}
.elementor-element-prtsellosrow {
    padding-top: 12px !important;
    padding-bottom: 4px !important;
}
.elementor-element-315f4ea {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}
footer .elementor-heading-title {
    font-size: 15px !important;
    margin-bottom: 6px !important;
}
footer .elementor-icon-list-items .elementor-icon-list-item {
    margin-bottom: 1px !important;
}
footer .elementor-icon-list-text {
    font-size: 13px !important;
    line-height: 1.4 !important;
}
footer .elementor-widget-text-editor {
    font-size: 13px !important;
    line-height: 1.4 !important;
}
@media (max-width: 767px) {
  .elementor-element-55e8856 {
      padding-top: 24px !important;
      padding-bottom: 12px !important;
  }
  .elementor-element-41300c3 {
      gap: 8px !important;
  }
}

/* Footer: el selector de idioma/moneda abre un panel de fondo blanco, pero la regla global "footer a" lo pinta color crema/blanco -> texto invisible. Forzamos color oscuro legible dentro del panel. */
footer .lc-content,
footer .lc-content .lc-title {
    color: #333333 !important;
}
footer .lc-content a,
footer .lc-list a {
    color: #333333 !important;
}
footer .lc-content a:hover,
footer .lc-list a.current {
    color: #176B87 !important;
}

/* About Us - Team section: fotos reales individuales (Jose/Melanny/Susana),
   reemplazan las fotos placeholder/compartidas anteriores. object-fit: cover
   en vez de position absoluto con pixeles fijos, para no depender del encuadre
   exacto de cada foto especifica. */
.elementor-element-4135eec,
.elementor-element-5caf98b,
.elementor-element-sus1mg0 {
    width: 180px !important;
    height: 180px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    position: relative !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.10);
}
.elementor-element-4135eec img,
.elementor-element-5caf98b img,
.elementor-element-sus1mg0 img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center 15% !important;
}

/* Menu movil: el bloque central (nav + botones + redes) se estiraba para llenar
   el alto restante del panel, pero su contenido no lo llenaba, dejando un vacio
   grande antes del selector de idioma. Se distribuye el contenido de forma pareja
   en vez de dejarlo apilado arriba con aire muerto debajo. */
.mobile-menu-center {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
}

/* Menu movil: unificar los 3 botones de contacto (llamar EN, llamar ES, WhatsApp)
   que tenian 3 tratamientos visuales distintos (rojo relleno, contorno verde,
   contorno teal) sin jerarquia real entre ellos -> mismo estilo para los 3. */
.moile-menu-btn a.togo-button.full-filled,
.moile-menu-btn a.prt-menu-wa-btn,
.moile-menu-btn a.prt-menu-tel2 {
    background: #FFFFFF !important;
    color: #176B87 !important;
    border: 1px solid #176B87 !important;
}

/* Menu movil: el submenu mega-menu (Excursions in Punta Cana) queda siempre
   display:block en el flujo aunque no este activo (solo se revela deslizando
   el .mb-menu padre), lo que inflaba la altura del contenedor central en ~1700px
   y generaba un scroll vacio enorme. Se oculta hasta que el JS del tema le agrega
   la clase is-active (mismo mecanismo que ya usa el tema, solo se completa el CSS
   que faltaba). */
.mb-menu .sub-menu.mega-menu:not(.is-active) {
    display: none !important;
}

/* Menu movil: el buscador dentro del menu tenia muy poco contraste
   (fondo #F5F8F9 sobre borde #E1E9EB casi invisibles sobre el blanco del menu). */
.prt-bh--menu .prt-bh__input {
    background: #FFFFFF !important;
    border: 1px solid #B9C7CB !important;
}
.prt-bh--menu .prt-bh__input::placeholder {
    color: #7A8A90 !important;
}

/* Menu movil: el buscador (.prt-bh--menu) no tenia el mismo padding horizontal
   de 24px que si tienen la fila superior (cerrar) y la inferior (idioma), por lo
   que se veia pegado de borde a borde del panel en vez de alineado con el resto. */
.prt-bh--menu {
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

/* Menu movil: el mega-menu de "Excursions in Punta Cana" (.togo-mega-destinations)
   se reutiliza tal cual del diseno de escritorio: fila horizontal con el listado de
   categorias en una columna fija de 320px y las miniaturas de destinos en el resto
   del espacio. Dentro del panel movil (~320-375px de ancho total) eso deja casi 0px
   para las miniaturas, que terminaban aplastadas en ~110px de ancho con texto cortado
   e imagenes diminutas superpuestas. Se apila en columna (categorias arriba, destinos
   abajo al hacer clic) igual que el resto del menu movil. */
@media (max-width: 1024px) {
  .mb-menu .togo-mega-destinations {
      flex-direction: column !important;
      width: 100% !important;
  }
  .mb-menu .destinations-nav {
      width: 100% !important;
  }
  .mb-menu .destinations-content {
      width: 100% !important;
      flex: 1 1 100% !important;
  }
  .mb-menu .destinations-box {
      width: 100% !important;
  }
  .mb-menu .children-list {
      width: 100% !important;
  }
  .mb-menu .children-item {
      width: 100% !important;
  }
}

/* Filtros de /trips/ (Price, Types, Activities, etc.): el icono cuadrado del
   checkbox usaba #DDDDDD, casi invisible sobre el fondo #FFFCF7 de la marca.
   Se oscurece para que se distinga con claridad, sin tocar el texto de las
   etiquetas (que ya tenia buen contraste). */
.filter-checkbox .togo-svg-icon.square svg {
    color: #8A97A0 !important;
}
.filter-checkbox input:checked ~ .togo-svg-icon.square svg,
.filter-checkbox:hover .togo-svg-icon.square svg {
    color: #176B87 !important;
}

/* Filtro de precio: los recuadros Min./Max. ahora son editables de verdad
   (ver functions.php prt-price-input-editable). Se les da feedback visual de foco
   ya que antes eran texto estatico y no lo necesitaban. */
.show-min-price,
.show-max-price {
    cursor: text !important;
}
.show-min-price:focus,
.show-max-price:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px #42B8C4 !important;
    border-radius: 6px;
}


/* /transfers-in-punta-cana/ (EN 9602, ES 9803, FR 9883): modernizacion visual.
   La pagina solo usa bloques de color plano y 2 fotos cuadradas de baja calidad;
   mientras se aprueban fotos nuevas (ver plan), se le da mas aire, ritmo entre
   secciones y trato editorial a las imagenes existentes via CSS puro, sin tocar
   ningun ID de Elementor ni su _elementor_data. */
.elementor-element-trh001 {
    background-image: linear-gradient(rgba(38,50,56,.78), rgba(38,50,56,.78)), url("https://pericoripiaotours.com/wp-content/uploads/2026/09/private-airport-transfer-van-punta-cana-scaled.jpg") !important;
    background-size: cover !important;
    background-position: center 60% !important;
}
.elementor-element-trh002 {
    text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.elementor-element-tri007 img,
.elementor-element-trt003 img {
    border-radius: 16px !important;
    box-shadow: 0 16px 40px rgba(38, 50, 56, .18);
    aspect-ratio: 4 / 3.4;
    object-fit: cover;
    width: 100%;
}

.elementor-element-trw004,
.elementor-element-trw007,
.elementor-element-trw010,
.elementor-element-trw013 {
    box-shadow: 0 4px 14px rgba(38, 50, 56, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}
.elementor-element-trw004:hover,
.elementor-element-trw007:hover,
.elementor-element-trw010:hover,
.elementor-element-trw013:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(38, 50, 56, .14);
}

.elementor-element-trh005,
.elementor-element-trh006,
.elementor-element-tri005,
.elementor-element-trc005,
.elementor-element-trc006 {
    transition: transform .2s ease, box-shadow .2s ease;
}
.elementor-element-trh005:hover .elementor-button,
.elementor-element-trh006:hover .elementor-button,
.elementor-element-tri005:hover .elementor-button,
.elementor-element-trc005:hover .elementor-button,
.elementor-element-trc006:hover .elementor-button {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

.elementor-element-trc001 {
    position: relative;
}
.elementor-element-trc001::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background: #EF3340;
}

@media (max-width: 767px) {
    .elementor-element-trh001 {
        padding-top: 110px !important;
    }
    .elementor-element-tri007 img,
    .elementor-element-trt003 img {
        aspect-ratio: 16 / 10;
    }
}

/* Blog (/blog/ listado + single posts): el tema padre Togo no tenia ningun
   estilo propio para .post-detail/.entry-content (confirmado, terreno limpio).
   Los 12 posts publicados no tenian featured image, por eso las tarjetas se
   veian como bloques de solo texto. Este bloque da a las tarjetas apariencia
   de tarjeta real (sombra, borde, categoria como badge, boton Read More) y
   da ritmo tipografico al cuerpo del single post. No depende de las fotos
   nuevas (Paso 4/6 del plan); cuando se agreguen, .post-thumbnail encajara
   arriba del accent-bar sin conflicto. */

/* -- Listado -- */
.togo-posts-wrapper.layout-grid {
    align-items: flex-start;
}
.togo-posts-wrapper.layout-grid .inner-post-wrap {
    background: #FFFFFF;
    border: 1px solid #EDE6DA;
    border-radius: 14px;
    padding: 0 0 24px;
    box-shadow: 0 4px 16px rgba(38, 50, 56, .05);
    transition: transform .25s ease, box-shadow .25s ease;
    overflow: hidden;
}
.togo-posts-wrapper.layout-grid article:hover .inner-post-wrap {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(38, 50, 56, .12);
}
.togo-posts-wrapper.layout-grid .inner-post-wrap::before {
    content: "";
    display: block;
    height: 6px;
    background: linear-gradient(90deg, #EF3340, #42B8C4);
}
.togo-posts-wrapper.layout-grid .post-thumbnail {
    margin: 0 0 16px;
}
.togo-posts-wrapper.layout-grid .post-thumbnail img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}
.togo-posts-wrapper.layout-grid .post-detail {
    padding: 20px 22px 0;
    display: flex;
    flex-direction: column;
}
.togo-posts-wrapper.layout-grid .post-cate a {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #176B87;
    background: #EDF5F6;
    padding: 4px 12px;
    border-radius: 999px;
}
.togo-posts-wrapper.layout-grid .post-title .entry-title {
    margin: 14px 0 10px;
    font-size: 19px;
    line-height: 1.35;
}
.togo-posts-wrapper.layout-grid .post-title .entry-title a {
    color: #263238;
}
.togo-posts-wrapper.layout-grid .post-excerpt {
    color: #5B6670;
    font-size: 15px;
    line-height: 1.6;
}
.togo-posts-wrapper.layout-grid .btn-readmore {
    margin-top: 16px;
}
.togo-posts-wrapper.layout-grid .btn-readmore a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #EF3340;
}
.togo-posts-wrapper.layout-grid .btn-readmore a::after {
    content: "\2192";
    transition: transform .2s ease;
}
.togo-posts-wrapper.layout-grid article:hover .btn-readmore a::after {
    transform: translateX(4px);
}

/* -- Single post -- */
.single.single-post .entry-content {
    font-size: 17px;
    line-height: 1.8;
    color: #3A4750;
}
.single.single-post .entry-content p {
    margin-bottom: 20px;
}
.single.single-post .entry-content h2 {
    margin-top: 44px;
    margin-bottom: 16px;
    font-size: 28px;
    font-weight: 700;
    color: #263238;
}
.single.single-post .entry-content h3 {
    margin-top: 32px;
    margin-bottom: 12px;
    font-size: 21px;
    font-weight: 600;
    color: #263238;
}
.single.single-post .entry-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.single.single-post .entry-category {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #176B87;
    background: #EDF5F6;
    padding: 4px 12px;
    border-radius: 999px;
}
.single.single-post .entry-thumbnail {
    margin: 24px 0 36px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(38, 50, 56, .16);
}
.single.single-post .entry-thumbnail img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

/* Single post: listas (ul) usadas en la reestructuracion de parrafos de los 12
   posts del blog (fusionar oraciones sueltas + listas para las secciones tipo
   "elige X si:"), sin estilo propio hasta ahora en el child theme. */
.single.single-post .entry-content ul {
    margin: 16px 0 24px;
    padding-left: 0;
    list-style: none;
}
.single.single-post .entry-content ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    line-height: 1.6;
}
.single.single-post .entry-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #EF3340;
}


/* Single post: rediseno tipografico real (no solo tamano de fuente). El usuario
   reporto que los 12 posts se seguian viendo como un Word sin formato: mucho
   texto plano sin jerarquia visual. Se agrega columna de lectura mas angosta,
   parrafo de entrada destacado, citas/remates en blockquote, tarjetas para
   listas repetitivas de sub-lugares, e imagenes intercaladas con estilo. */
.single.single-post .entry-content {
    max-width: 720px;
}
.single.single-post .entry-content > p:first-of-type {
    font-size: 20px;
    line-height: 1.7;
    color: #263238;
    font-weight: 500;
}
.single.single-post .entry-content blockquote {
    margin: 32px 0;
    padding: 20px 24px;
    border-left: 4px solid #EF3340;
    background: #FBF3EC;
    border-radius: 0 10px 10px 0;
    font-size: 19px;
    line-height: 1.6;
    color: #263238;
    font-weight: 600;
}
.single.single-post .entry-content blockquote p {
    margin-bottom: 0;
}
.single.single-post .entry-content .prt-place-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 24px 0 32px;
}
.single.single-post .entry-content .prt-place-card {
    background: #FFFFFF;
    border: 1px solid #EDE6DA;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 2px 8px rgba(38,50,56,.05);
}
.single.single-post .entry-content .prt-place-card h3 {
    margin: 0 0 8px !important;
    font-size: 17px !important;
    color: #176B87 !important;
}
.single.single-post .entry-content .prt-place-card p {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #5B6670;
}
.single.single-post .entry-content .prt-inline-img {
    margin: 32px 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(38,50,56,.12);
}
.single.single-post .entry-content .prt-inline-img img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    margin: 0;
}
@media (max-width: 767px) {
    .single.single-post .entry-content .prt-place-grid {
        grid-template-columns: 1fr;
    }
}

/* PRT-CONTACT-GETINTOUCH-WRAP: la fila 'Get in Touch' se desborda hacia el formulario
 * al agregar el segundo telefono (4 items en una sola linea sin wrap). Se permite
 * que la lista haga salto de linea en vez de desbordar. Mismo ID en los 3 idiomas. */
.elementor-element-e22d3c3 .togo-icon-list.togo-icon-list-horizontal{flex-wrap:wrap !important;row-gap:12px;}

/* PRT-CONTACT-MODERN: modernizacion de /contact/ (mismo lenguaje visual que las
 * tarjetas del blog: fondo blanco, borde suave, radio 14px, sombra, barra de
 * acento en gradiente). Mismos IDs de Elementor (cd12220, e8bedd8) en los 3 idiomas. */
.elementor-element-cd12220,
.elementor-element-e8bedd8 {
    background: #FFFFFF;
    border: 1px solid #EDE6DA;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(38, 50, 56, .05);
    padding: 32px !important;
    position: relative;
    overflow: hidden;
}
/* PRT-CONTACT-MODERN: se quito la barra de acento en gradiente (feedback del cliente: no le gustaba). */

/* Contact hero: imagen de fondo (muelle de Playa Bavaro, Punta Cana) con overlay
 * oscuro, mismo tratamiento que el header del Blog (elementor-element-blh001). */
.elementor-element-4557332 {
    background-image: linear-gradient(rgba(38,50,56,.72), rgba(38,50,56,.72)), url("https://pericoripiaotours.com/wp-content/uploads/2026/09/contact-bavaro-pier.jpg") !important;
    background-size: cover !important;
    background-position: center 40% !important;
}

/* PRT-CONTACT-MOBILE-WRAP: el email en la tarjeta 'Get in Touch' se corta en mobile
 * porque un CSS global (prt-telefonos) fuerza white-space:nowrap en cualquier
 * link mailto:/tel: del sitio. Se sube la especificidad para vencerlo solo aqui. */
.elementor-element-e22d3c3 .togo-icon-list-item-link[href^="mailto:"] {
    white-space: normal !important;
    word-break: break-word;
}

/* PRT-CONTACT-WA-ICONS */
/* Icono de WhatsApp a la izquierda de cada numero en 'Get in Touch'. Cada icono
 * (elementor-element-prtwaic1 = EN, prtwaic2 = ES) es un link independiente al
 * wa.me de ese numero especifico, separado del link tel: del numero (que sigue
 * siendo para llamar). Filas prtwarow1/prtwarow2 contienen [icono][numero]. */
.elementor-element-prtwarow1,
.elementor-element-prtwarow2 {
    margin-bottom: 12px;
}
.elementor-element-prtwaic1 .elementor-icon,
.elementor-element-prtwaic2 .elementor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s ease, transform .2s ease;
}
.elementor-element-prtwaic1 .elementor-icon:hover,
.elementor-element-prtwaic2 .elementor-icon:hover {
    opacity: .75;
    transform: scale(1.08);
}
.elementor-element-prtphone1 .togo-icon-list,
.elementor-element-prtphone2 .togo-icon-list {
    gap: 0;
}

/* PRT-CONTACT-WA-ICONS-NOWRAP */
/* En mobile el widget icono (Elementor) toma 100% de ancho por defecto y
 * empuja el numero a la siguiente linea. Se fuerza la fila a no wrapear y
 * el icono a su ancho natural. */
.elementor-element-prtwarow1,
.elementor-element-prtwarow2 {
    flex-wrap: nowrap !important;
}
.elementor-element-prtwaic1,
.elementor-element-prtwaic2 {
    flex: 0 0 auto !important;
    width: auto !important;
}
.elementor-element-prtphone1,
.elementor-element-prtphone2 {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
}

/* PRT-TOPBAR-WA-WIDTH-FIX */
/* La fila del top bar tiene 3 columnas hermanas (telefonos | espaciador |
 * redes+idioma), cada una con width:100% por defecto de Elementor, asi que
 * el flexbox las reparte en tercios iguales (~380px). Antes funcionaba porque
 * la columna de telefonos era un solo widget que cabia en ese tercio; ahora
 * son 3 lineas (WA+EN, WA+ES, email) y necesitan mas ancho. Se le da
 * flex-grow para que tome el espacio que sobra y las otras dos columnas se
 * ajustan a su contenido en vez de tomar un tercio fijo. */
.elementor-element-c192067 {
    flex: 1 1 auto !important;
    width: auto !important;
}
.elementor-element-3eaa708 {
    flex: 0 0 auto !important;
    width: auto !important;
}
.elementor-element-9637842 {
    flex: 0 0 auto !important;
    width: auto !important;
}

/* Mismo problema un nivel mas abajo: las 3 filas hijas de c192067
 * (prtwatbrow1, prtwatbrow2, be45b30) tambien heredan width:100% por
 * defecto de Elementor, asi que cada una reclama el 100% del ancho de
 * c192067 y se apilan. Se ajustan a su contenido tambien. */
.elementor-element-prtwatbrow1,
.elementor-element-prtwatbrow2,
.elementor-element-be45b30 {
    flex: 0 0 auto !important;
    width: auto !important;
}

/* PRT-CONTACT-CARD-NOSTRETCH */
/* 'Get in Touch' se estiraba (align-items:stretch por defecto de Elementor)
 * para igualar la altura de 'Send us a message' (mas alta por el formulario).
 * Al quitar el boton de WhatsApp quedo un hueco vacio grande abajo. Se deja
 * que la tarjeta tome solo su alto natural. */
.elementor-element-cd12220 {
    align-self: flex-start !important;
}

/* PRT-WA-PILLS-DESKTOP: revertido, al cliente no le gusto el estilo pill. */

/* PRT-MOBILE-MENU-EXCURSIONS-SIMPLIFY: en movil, la tarjeta "TOP DESTINATIONS"
 * con fotos ocupaba demasiado espacio dentro del menu lateral y obligaba a
 * hacer scroll largo. Se deja solo la lista de categorias en texto. */
.mobile-menu-content .destinations-content,
.mobile-menu-content .destinations-banner {
    display: none !important;
}

/* PRT-MENU-MOVIL-BANDERA-FIX: la bandera EN se estiraba verticalmente porque
 * .togo-button usa display:flex sin align-items, y el <img> heredaba
 * align-self:stretch llenando todo el alto del boton. */
.prt-bandera.prt-bandera-tel {
    align-self: center !important;
    width: 18px !important;
    height: 12px !important;
    flex: 0 0 auto !important;
    object-fit: cover !important;
}

/* PRT-MENU-MOVIL-TEL-NOWRAP: el numero de EEUU ("+1 (829) 879-1332") se
 * envolvia en 2 lineas dentro de la pastilla, agrandando esa fila y
 * empujando el resto del menu hacia abajo. Se reduce texto/padding para
 * que ambos numeros quepan siempre en una sola linea. */
.prt-menu-tel-row .togo-button.full-filled,
.prt-menu-tel-row .prt-menu-tel2 {
    font-size: 14px !important;
    white-space: nowrap !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* PRT-MENU-MOVIL-ESPACIADO: sobraba espacio vertical entre el listado de
 * links (Home/Excursions/.../About Us) y los numeros de telefono. Se reduce
 * el margen superior de ese bloque para un panel mas compacto. */
.mobile-menu-content .moile-menu-btn,
.mobile-menu-content .mobile-menu-btn {
    margin-top: 16px !important;
}

/* PRT-FOOTER-CONTACTO-ESPACIADO: la columna "Contact us" del footer tenia
 * demasiado aire entre las 2 filas de telefono/WhatsApp (24px de gap +
 * 10px de padding arriba y abajo de cada fila = 44px de separacion visual).
 * Se reduce a un total de ~24px sin perder el area de toque. */
.elementor-element-cf69450 {
    row-gap: 12px !important;
}
.elementor-element-prtwaftrow1,
.elementor-element-prtwaftrow2 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Los widgets de telefono heredaban 20px de padding inferior y 30px a la
 * derecha del estilo global del footer. Ese espacio invisible elevaba los
 * numeros respecto al boton de WhatsApp y separaba artificialmente las filas. */
.elementor-element-prtwaftrow1 .elementor-element-prtwaftph1 > .elementor-widget-container,
.elementor-element-prtwaftrow2 .elementor-element-prtwaftph2 > .elementor-widget-container {
    padding: 0 !important;
}

.elementor-element-prtwaftrow1 .togo-icon-list-item-link,
.elementor-element-prtwaftrow2 .togo-icon-list-item-link {
    align-items: center !important;
    margin-right: 0 !important;
}

/* PRT-FOOTER-SELLOS-ESPACIADO: entre "Follow us" y las insignias de
 * WeTravel/Tripadvisor quedaba un bloque de ~120px en blanco, resultado de
 * sumar el padding inferior de la fila de columnas con el padding superior
 * de la fila de sellos (mismo color de fondo, se percibe como un hueco).
 * Se recorta cada padding para un footer mas compacto. */
.elementor-element-55e8856 {
    padding-bottom: 12px !important;
}
.elementor-element-prtsellosrow {
    padding-top: 0 !important;
}
.elementor-element-prtsellosrow > .e-con-inner {
    padding-top: 12px !important;
}

/* About hero intro: this Elementor widget is offset one component width on mobile. */
@media (max-width: 767px) {
    .elementor-9265 .elementor-element.elementor-element-15dda0d,
    .elementor-9999 .elementor-element.elementor-element-15dda0d,
    .elementor-10000 .elementor-element.elementor-element-15dda0d {
        transform: translateX(-100%) !important;
    }

    .elementor-9265 .elementor-element.elementor-element-ce0f48d,
    .elementor-9999 .elementor-element.elementor-element-ce0f48d,
    .elementor-10000 .elementor-element.elementor-element-ce0f48d {
        order: 1 !important;
        top: -90px;
    }

    .elementor-9265 .elementor-element.elementor-element-15dda0d,
    .elementor-9999 .elementor-element.elementor-element-15dda0d,
    .elementor-10000 .elementor-element.elementor-element-15dda0d {
        order: 2 !important;
        top: 50px;
    }
}


/* Formulario de contacto: etiquetas visibles (29-sep-2026)
   El tema Togo pone la etiqueta DENTRO del input (position:absolute) y la sube
   con una clase .focus que su JS ya no anade, asi que el fondo blanco del input
   la tapaba por completo. Se pasa a etiqueta normal encima del campo.
   wpautop envuelve la etiqueta en un <p>, por eso el selector es descendiente. */
.wpcf7-form .form-field.togo-field label{
    position: static;
    transform: none;
    display: block;
    margin-bottom: .4rem;
    font-size: .875rem;
}
.wpcf7-form .form-field.togo-field input{
    padding-top: 0;
}